import Link from 'next/link';
import { ChevronDownIcon } from '@/components/ui/icons';
import { cn } from '@/lib/cn';
import type { FaqItem } from '@/content/faq';

/** Native details/summary accordion: keyboard and screen-reader friendly with zero JS. */
export function FaqList({ items, className }: { items: readonly FaqItem[]; className?: string }) {
  return (
    <div className={cn('divide-y divide-line/70 overflow-hidden rounded-card border border-line bg-surface/70', className)}>
      {items.map((item) => (
        <details key={item.id} id={item.id} className="group scroll-mt-28">
          <summary className="flex min-h-16 items-center justify-between gap-4 px-5 py-4 text-left font-display text-base font-semibold tracking-[-0.01em] transition-colors hover:bg-white/[0.03] focus-visible:outline-offset-[-3px] sm:px-6 sm:text-lg">
            {item.question}
            <span className="grid size-9 shrink-0 place-items-center rounded-full border border-line-strong/70 text-muted transition-transform duration-200 group-open:rotate-180 group-open:border-violet-soft group-open:text-fg">
              <ChevronDownIcon className="size-5" />
            </span>
          </summary>
          <div className="flex flex-col gap-3 px-5 pb-6 leading-relaxed text-muted sm:px-6">
            {item.answer.map((paragraph) => (
              <p key={paragraph}>{paragraph}</p>
            ))}
            {item.link && (
              <p>
                <Link href={item.link.href} className="font-semibold text-violet-soft underline-offset-4 hover:underline">
                  {item.link.label} →
                </Link>
              </p>
            )}
          </div>
        </details>
      ))}
    </div>
  );
}