import { JsonLd } from './JsonLd';
import { ChevronDownIcon, MessageIcon } from './Icons';

export function Faq({ items, title = 'Frequently asked questions' }: { items: { q: string; a: string }[]; title?: string }) {
  if (!items.length) return null;
  return (
    <section aria-labelledby="faq-h" className="space-y-5">
      <h2 id="faq-h" className="flex items-center gap-2.5 font-serif text-2xl font-semibold tracking-tight">
        <span className="grid h-8 w-8 place-items-center rounded-lg bg-ledger-soft text-ledger">
          <MessageIcon className="h-4 w-4" />
        </span>
        {title}
      </h2>
      <div className="card divide-y divide-rule overflow-hidden">
        {items.map((f, i) => (
          <details key={f.q} className="group open:bg-paper" open={i === 0}>
            <summary className="flex list-none items-start justify-between gap-4 px-5 py-4 font-semibold text-ink transition-colors hover:bg-paper">
              <span>{f.q}</span>
              <ChevronDownIcon className="disclosure-chevron mt-0.5 h-5 w-5 text-muted group-hover:text-ink" />
            </summary>
            <p className="max-w-[68ch] px-5 pb-5 pt-0 leading-relaxed text-ink-2">{f.a}</p>
          </details>
        ))}
      </div>
      <JsonLd
        data={{
          '@context': 'https://schema.org',
          '@type': 'FAQPage',
          mainEntity: items.map((f) => ({ '@type': 'Question', name: f.q, acceptedAnswer: { '@type': 'Answer', text: f.a } })),
        }}
      />
    </section>
  );
}