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

export function VerifyEmailConfirmationCard({
  pass = false
}: {
  pass: boolean
}) {
  return (
    <Card className="w-full max-w-sm border-0">
      <CardHeader className="space-y-1 text-center">
        <div className="flex justify-center">
          <div className={`rounded-full p-4 ${pass ? 'bg-green-500/10' : 'bg-red-500/10'}`}>
          {
            pass ? (
              <CheckCircle2 className="h-12 w-12 text-green-500" />
            ) : (
              <XCircle className="h-12 w-12 text-red-500" />
            )
          }
          </div>
        </div>

        <CardTitle className="text-2xl font-bold">
          { pass ? 'Email Verified' : 'Email Verification Failed' }
        </CardTitle>
        <CardDescription className="text-balance">
          { pass ?
            <>
              Your email has been successfully verified.
              <br />
              You can now access all features of your Kokotrack account.
            </>
          :
            'This verification link may have already been used or has expired.'
          }
        </CardDescription>
      </CardHeader>
      <CardContent className="space-y-4 text-center">
        <Button asChild className="w-auto inline-block">
          { pass
            ? <Link href="/dashboard">Continue to Account</Link>
            : <Link href="/login">Got to Login</Link>
          }
        </Button>
      </CardContent>
      <CardFooter className="flex flex-col space-y-3">
        {/* <div className="w-full border-t pt-4"> */}
        <div className="w-full pt-4">
          <p className="text-center text-sm text-muted-foreground">
            Need help?{" "}
            <Link href="https://support.kokotrack.com" target="_blank" rel="noopener noreferrer" className="text-primary hover:underline font-medium">
              Contact support
            </Link>
          </p>
        </div>
      </CardFooter>
    </Card>
  )
}