import { useT } from '@/lib/i18n/react';
import { LabelWithTooltip } from '@/components/ui/primitives/LabelWithTooltip';

type Props = { tier1Pct: number; cookieDays: number };

export function TrustStrip({ tier1Pct, cookieDays }: Props) {
  const t = useT('affiliate_landing');

  const trackingTooltip = t('tooltip_trust_tracking').replace('{{cookieDays}}', String(cookieDays));

  return (
    <section aria-label={t('trust_strip_aria')} className="bg-(--color-primary) py-10 text-white">
      <ul className="mx-auto grid max-w-3xl list-none grid-cols-3 gap-6 text-center">
        <li>
          <p className="text-4xl font-extrabold tabular-nums">
            {t('trust_stat1_from').replace('{{tier1Pct}}', String(tier1Pct))}
          </p>
          <p className="mt-1 text-sm text-white/80">{t('trust_stat1_label')}</p>
        </li>
        <li>
          <p className="text-4xl font-extrabold tabular-nums">
            {cookieDays} {t('trust_stat2_days_suffix')}
          </p>
          <p className="mt-1 text-sm text-white/80">
            <LabelWithTooltip
              label={t('trust_stat2_label')}
              tooltip={trackingTooltip}
              className="[&_button]:text-white/60 [&_button:hover]:text-white [&_label]:text-white/80"
            />
          </p>
        </li>
        <li>
          <p className="text-4xl font-extrabold tabular-nums">{t('trust_stat3_value')}</p>
          <p className="mt-1 text-sm text-white/80">{t('trust_stat3_label')}</p>
        </li>
      </ul>
    </section>
  );
}