import Link from 'next/link';
import { me } from '@/lib/api';
import { Flash, PageHeader, type SP } from '@/components/ui';
import { ArrowLeftIcon, KeyIcon } from '@/components/Icons';
import { SecurityPanels } from '@/components/SecurityPanels';

export default async function PortalSecurity({ searchParams }: { searchParams: SP }) {
  const sp = await searchParams;
  const user = await me();
  return (
    <>
      <Link href="/portal" className="mb-3 inline-flex items-center gap-1.5 text-sm text-muted hover:text-ink">
        <ArrowLeftIcon className="h-4 w-4" /> Dashboard
      </Link>
      <PageHeader title="Account security" icon={<KeyIcon className="h-5 w-5" />} description="Your password, two-factor authentication and signed-in devices." />
      <Flash ok={sp.ok} err={sp.err} />
      <SecurityPanels user={user} basePath="/portal/security" setup={!!sp.setup} />
    </>
  );
}