import { useState } from 'react';
import { useT } from '@/lib/i18n/react';
import { Button } from '@/components/ui/primitives/Button';
import type { AffiliateConfig } from '../types';

const FAQ_KEYS = ['faq1', 'faq2', 'faq3', 'faq4'] as const;

type Props = { config: AffiliateConfig };

export function FaqSection({ config }: Props) {
  const t = useT('affiliate_landing');
  const [openIdx, setOpenIdx] = useState<number | null>(null);

  const interpolate = (s: string) =>
    s
      .replace('{{holdDays}}', String(config.holdDays))
      .replace('{{withdrawalMinIls}}', String(config.withdrawalMinIls))
      .replace('{{tier1Pct}}', String(config.tier1Pct))
      .replace('{{tier2Pct}}', String(config.tier2Pct))
      .replace('{{tier3Pct}}', String(config.tier3Pct));

  return (
    <section aria-labelledby="faq-heading" className="py-16">
      <h2 id="faq-heading" className="mb-8 text-center text-3xl font-bold text-(--color-text)">
        {t('faq_heading')}
      </h2>
      <dl className="mx-auto max-w-2xl divide-y divide-(--color-border)">
        {FAQ_KEYS.map((key, i) => (
          <div key={key} className="py-4">
            <dt>
              <Button
                type="button"
                variant="ghost"
                aria-expanded={openIdx === i}
                aria-controls={`faq-answer-${i}`}
                onClick={() => setOpenIdx(openIdx === i ? null : i)}
                className="flex w-full items-center justify-between text-start font-semibold text-(--color-text)"
              >
                <span>{t(`${key}_q` as Parameters<typeof t>[0])}</span>
                <span aria-hidden="true" className="ms-4 text-(--color-primary)">
                  {openIdx === i ? '−' : '+'}
                </span>
              </Button>
            </dt>
            <dd
              id={`faq-answer-${i}`}
              hidden={openIdx !== i}
              className="mt-2 text-sm text-(--color-text-muted)"
            >
              {interpolate(t(`${key}_a` as Parameters<typeof t>[0]))}
            </dd>
          </div>
        ))}
      </dl>
    </section>
  );
}