import Link from "next/link"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { AlertCircle } from "lucide-react"

export default function AuthErrorPage() {
  return (
    <div className="flex min-h-screen items-center justify-center bg-[var(--ds-background-layout-default)] p-[var(--ds-space-2x)]">
      <Card className="w-full max-w-md rounded-[var(--ds-radius-l)] border-[var(--ds-neutral-200)] py-[var(--ds-space-4x)] shadow-[var(--ds-shadow-4dp)]">
        <CardHeader className="text-center">
          <div className="mx-auto mb-[var(--ds-space-2x)] flex h-[var(--ds-space-5x)] w-[var(--ds-space-5x)] items-center justify-center rounded-[var(--ds-radius-m)] bg-[var(--ds-error-100)]">
            <AlertCircle className="h-6 w-6 text-[var(--ds-error-700)]" />
          </div>
          <CardTitle className="ds-type-global-l ds-type-semibold text-[var(--ds-text-neutral-default)]">
            Error de autenticacion
          </CardTitle>
          <CardDescription className="ds-type-global-xs text-[var(--ds-text-neutral-lighter)]">
            Hubo un problema al iniciar sesion. El enlace puede haber expirado o ser invalido.
          </CardDescription>
        </CardHeader>
        <CardContent className="text-center">
          <Button
            asChild
            className="rounded-[var(--ds-radius-m)] bg-[var(--ds-brand-400)] ds-type-global-xs ds-type-semibold text-white hover:bg-[var(--ds-brand-500)]"
          >
            <Link href="/auth/login">Volver a intentar</Link>
          </Button>
        </CardContent>
      </Card>
    </div>
  )
}