"use client";

import { useTranslations } from "next-intl";
import Link from "next/link";
import { useTransition } from "react";
import { toast } from "sonner";

import { Button } from "@/components/ui/button";
import { requestEmailVerificationOTP } from "@/lib/actions/auth";

export function UnverifiedEmailBanner({ email, locale }: { email: string; locale: string }) {
  const t = useTranslations("Auth.unverifiedBanner");
  const [isPending, startTransition] = useTransition();

  function onResend() {
    startTransition(async () => {
      try {
        await requestEmailVerificationOTP({ email });
        toast.success(t("resendSuccess"));
      } catch {
        toast.error(t("resendFailed"));
      }
    });
  }

  const verifyHref = `/${locale}/verify-email?email=${encodeURIComponent(email)}`;

  return (
    <div className="flex items-center justify-between gap-4 rounded-lg border border-amber-500/40 bg-amber-500/10 p-4">
      <div className="flex flex-col gap-1">
        <div className="text-sm font-semibold text-amber-700 dark:text-amber-300">{t("title")}</div>
        <div className="text-xs text-muted-foreground">{t("description", { email })}</div>
      </div>
      <div className="flex items-center gap-2">
        <Button asChild variant="default" size="sm">
          <Link href={verifyHref}>{t("verifyNow")}</Link>
        </Button>
        <Button type="button" variant="outline" size="sm" onClick={onResend} disabled={isPending}>
          {isPending ? t("resending") : t("resend")}
        </Button>
      </div>
    </div>
  );
}