import { useState, type ReactNode } from 'react';
import { cn } from '../lib/cn';

export interface FAQItemData {
  question: ReactNode;
  answer: ReactNode;
}

export interface FAQProps {
  title?: ReactNode;
  subtitle?: ReactNode;
  items: FAQItemData[];
  defaultOpen?: number;
  className?: string;
}

export function FAQ({ title, subtitle, items, defaultOpen = -1, className }: FAQProps) {
  return (
    <section className={cn('w-full py-16 md:py-24 bg-bg', className)}>
      <div className="mx-auto max-w-3xl px-4 md:px-6">
        {(title || subtitle) && (
          <div className="text-center mb-10 md:mb-14">
            {title && (
              <h2 className="font-display font-semibold tracking-tight text-text text-3xl md:text-4xl">
                {title}
              </h2>
            )}
            {subtitle && <p className="mt-4 text-lg text-text-2">{subtitle}</p>}
          </div>
        )}

        <div className="flex flex-col gap-3">
          {items.map((item, i) => (
            <FAQItem key={i} item={item} initialOpen={i === defaultOpen} />
          ))}
        </div>
      </div>
    </section>
  );
}

function FAQItem({ item, initialOpen }: { item: FAQItemData; initialOpen: boolean }) {
  const [open, setOpen] = useState(initialOpen);

  return (
    <div
      className={cn(
        'rounded-xl border bg-surface transition-colors',
        open ? 'border-primary-ring' : 'border-border'
      )}
    >
      <button
        type="button"
        onClick={() => setOpen((v) => !v)}
        aria-expanded={open}
        className="w-full flex items-center justify-between gap-4 px-5 py-4 text-left focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-ring rounded-xl"
      >
        <span className="text-base font-medium text-text">{item.question}</span>
        <svg
          width="18"
          height="18"
          viewBox="0 0 24 24"
          fill="none"
          stroke="currentColor"
          strokeWidth="2"
          strokeLinecap="round"
          strokeLinejoin="round"
          className={cn('shrink-0 text-text-3 transition-transform duration-base', open && 'rotate-180')}
        >
          <polyline points="6 9 12 15 18 9" />
        </svg>
      </button>
      {open && (
        <div className="px-5 pb-5 pt-0 text-sm text-text-2 leading-relaxed">
          {item.answer}
        </div>
      )}
    </div>
  );
}