import { useTranslations } from 'next-intl';
import { ShieldCheck } from 'lucide-react';

/**
 * Escrow guarantee banner displayed on the checkout summary page.
 * Informs the customer that InstaParty holds the payment in escrow
 * until the event is completed.
 */
export function EscrowGuaranteeBanner() {
  const t = useTranslations('checkout.escrow');

  return (
    <div
      role="note"
      aria-label={t('title')}
      className="flex items-start gap-3 rounded-lg border border-primary-200 bg-primary-50 px-4 py-3 text-sm"
    >
      <ShieldCheck
        className="mt-0.5 h-5 w-5 shrink-0 text-primary-600"
        aria-hidden="true"
      />
      <div>
        <p className="font-semibold text-primary-800">{t('title')}</p>
        <p className="mt-0.5 text-primary-700">{t('body')}</p>
      </div>
    </div>
  );
}