"use client";

import { ShieldAlert } from "lucide-react";
import { ButtonLink } from "@/components/common/Button";
import { useAgentAuth } from "@/hooks/useAgentAuth";
import { useTranslation } from "@/hooks/useTranslation";

export function AgentVerifyBanner() {
  const { user } = useAgentAuth();
  const { t } = useTranslation();

  if (!user || user.kycStatus !== "unverified") return null;

  return (
    <div className="flex flex-col gap-4 rounded-2xl border border-amber-200 bg-amber-50 px-5 py-4 text-amber-700 sm:flex-row sm:items-center sm:justify-between dark:border-amber-500/20 dark:bg-amber-500/10 dark:text-amber-300">
      <div className="flex items-center gap-4">
        <span className="grid h-12 w-12 shrink-0 place-items-center rounded-xl bg-amber-100 dark:bg-amber-500/20">
          <ShieldAlert className="h-6 w-6 text-amber-600 dark:text-amber-400" />
        </span>
        <div>
          <p className="text-sm font-bold">{t("agent.sendRemittance.verifyBannerTitle")}</p>
          <p className="mt-0.5 text-xs opacity-80">{t("agent.sendRemittance.verifyBannerMessage")}</p>
        </div>
      </div>
      <ButtonLink
        href="/agent/kyc"
        size="sm"
        variant="outline"
        className="shrink-0 self-start border-current bg-white/60 text-amber-600 sm:self-center dark:bg-slate-950/20 dark:text-amber-400"
      >
        {t("agent.sendRemittance.verifyBannerCta")}
      </ButtonLink>
    </div>
  );
}