import { createFileRoute } from "@tanstack/react-router";
import { getSecuritySettings } from "~/fns/account-security";
import { PasskeysPanel } from "~/components/settings/PasskeysPanel";
import { SessionsPanel } from "~/components/settings/SessionsPanel";
import { TwoFactorPanel } from "~/components/settings/TwoFactorPanel";

export const Route = createFileRoute("/settings/security")({
  loader: () => getSecuritySettings(),
  head: () => ({ meta: [{ title: "Password and authentication · gitfor" }] }),
  component: SecuritySettings,
});

function SecuritySettings() {
  const settings = Route.useLoaderData();

  return (
    <div className="space-y-6">
      <TwoFactorPanel
        enabled={settings.totpEnabled}
        recoveryCodesLeft={settings.recoveryCodesLeft}
        hasPassword={settings.hasPassword}
      />
      <PasskeysPanel passkeys={settings.passkeys} hasPassword={settings.hasPassword} />
      <SessionsPanel sessions={settings.sessions} />
    </div>
  );
}