export default function SettingsPage() {
  return (
    <div>
      <h1 className="text-2xl font-bold mb-4">Settings</h1>
      <div className="max-w-2xl space-y-6">
        <section className="rounded-xl border bg-white p-6 shadow-sm">
          <h2 className="text-lg font-semibold mb-4">Household</h2>
          <p className="text-sm text-gray-500">
            Household management will be available here. Create a household, invite members, or
            switch between households.
          </p>
        </section>

        <section className="rounded-xl border bg-white p-6 shadow-sm">
          <h2 className="text-lg font-semibold mb-4">Account</h2>
          <p className="text-sm text-gray-500">
            Account settings are managed through Keycloak. Click the button below to manage your
            profile.
          </p>
          <a
            href={`${process.env.NEXT_PUBLIC_KEYCLOAK_URL || 'http://localhost:8080'}/realms/${process.env.NEXT_PUBLIC_KEYCLOAK_REALM || 'meshitrack'}/account`}
            target="_blank"
            rel="noopener noreferrer"
            className="mt-4 inline-block rounded-lg border px-4 py-2 text-sm font-medium hover:bg-gray-50 transition-colors"
          >
            Manage Keycloak Account →
          </a>
        </section>
      </div>
    </div>
  );
}