import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
import { getLocale, t } from '@/lib/i18n';

const KNOWN_ERRORS = ['access_denied', 'invalid_request', 'invalid_state', 'oauth_failed'] as const;

export async function LoginCard({ error }: { error?: string }) {
  const locale = await getLocale();
  const errorMessage =
    error && (KNOWN_ERRORS as readonly string[]).includes(error)
      ? t(locale, `login.errors.${error}`)
      : undefined;

  return (
    <main className="flex min-h-screen items-center justify-center px-4">
      <Card className="w-full max-w-sm">
        <CardHeader className="items-center text-center">
          <div className="mb-2 flex size-12 items-center justify-center rounded-xl bg-primary text-lg font-semibold text-primary-foreground">
            N
          </div>
          <CardTitle className="text-xl">{t(locale, 'login.title')}</CardTitle>
          <CardDescription>{t(locale, 'login.subtitle')}</CardDescription>
        </CardHeader>
        <CardContent className="space-y-4">
          {errorMessage && (
            <p className="rounded-md border border-destructive/30 bg-destructive/10 px-3 py-2 text-sm text-destructive">
              {errorMessage}
            </p>
          )}
          <a
            href="/api/auth/login"
            className="inline-flex h-10 w-full items-center justify-center gap-2 rounded-md bg-primary text-sm font-medium text-primary-foreground transition-colors hover:bg-primary/90"
          >
            {t(locale, 'login.cta')}
          </a>
          <p className="text-center text-xs text-muted-foreground">{t(locale, 'login.footer')}</p>
        </CardContent>
      </Card>
    </main>
  );
}
