import Link from "next/link";
import { CircleAlert } from "lucide-react";
import { Button } from "@/components/ui/button";
import { CardFooter, CardHeader } from "@/components/ui/card";

const ErrorCard = () => {
  return (
    <div className="flex items-center justify-center">
      <div className="w-full">
        <CardHeader className="space-y-1 text-center">
          <div className="mx-auto flex h-20 w-20 items-center justify-center rounded-full bg-red-50">
            <CircleAlert className="h-10 w-10 text-destructive" />
          </div>
          <h1 className="text-2xl font-bold tracking-tight text-destructive">
            Authentication Error
          </h1>
          <p className="text-sm text-muted-foreground">
            We couldn&apos;t complete the authentication process
          </p>
        </CardHeader>

        <CardFooter className="mx-auto w-fit">
          <Link href={"/auth/login"}>
            <Button className="">Back to Login</Button>
          </Link>
        </CardFooter>
      </div>
    </div>
  );
};

export default ErrorCard;