import { MailCheck } from "lucide-react";
import { Button } from "@/components/ui/button";

interface EmailConfirmationNoticeProps {
  email: string;
  isResending: boolean;
  resendCooldown: number;
  onResend: () => Promise<void>;
}

export function EmailConfirmationNotice({
  email,
  isResending,
  resendCooldown,
  onResend,
}: EmailConfirmationNoticeProps) {
  const resendDisabled = isResending || resendCooldown > 0;

  return (
    <div className="space-y-6 text-center" role="status" aria-live="polite">
      <MailCheck className="mx-auto h-12 w-12 text-primary" aria-hidden="true" />
      <div className="space-y-2">
        <p>
          Un email de confirmation a été envoyé à <strong className="break-all">{email}</strong>.
        </p>
        <p>Cliquez sur le lien reçu avant de vous connecter.</p>
        <p className="text-sm text-muted-foreground">Pensez à vérifier vos spams.</p>
      </div>
      <Button type="button" variant="outline" onClick={onResend} disabled={resendDisabled}>
        {isResending
          ? "Envoi en cours..."
          : resendCooldown > 0
            ? `Renvoyer l’email dans ${resendCooldown} s`
            : "Renvoyer l’email de confirmation"}
      </Button>
    </div>
  );
}