"use client";

import Link from "next/link";
import { useSearchParams } from "next/navigation";
import { AlertTriangle } from "lucide-react";
import { Button } from "@/components/ui/button";
import { useLanguage } from "@/lib/i18n/context";

export function AuthErrorContent() {
  const { t } = useLanguage();
  const c = t.auth.pages.authError;
  const searchParams = useSearchParams();
  const code = searchParams.get("error");

  return (
    <div className="flex flex-col items-center gap-4 py-2 text-center">
      <span className="flex size-12 items-center justify-center rounded-full bg-destructive/15 text-destructive">
        <AlertTriangle className="size-6" />
      </span>
      <p className="text-sm text-muted-foreground">{c.description}</p>
      {code ? (
        <p className="rounded-md border border-border bg-secondary/40 px-3 py-1.5 font-mono text-xs text-muted-foreground">
          {code}
        </p>
      ) : null}
      <Button asChild size="lg" className="w-full">
        <Link href="/login">{c.backToLogin}</Link>
      </Button>
    </div>
  );
}