'use client';

import { useState } from 'react';
import Link from 'next/link';
import { ChevronDown } from 'lucide-react';
import Reveal from '../Reveal.jsx';
import SectionHeading from '../SectionHeading.jsx';

function cx(...args) {
  return args.filter(Boolean).join(' ');
}

function FaqItem({ item }) {
  const [open, setOpen] = useState(false);
  return (
    <div className="border-b border-slate-200 dark:border-slate-800">
      <button onClick={() => setOpen(!open)} className="w-full flex items-center justify-between gap-4 py-4 text-left">
        <span className="text-sm sm:text-base font-medium">{item.question}</span>
        <ChevronDown className={cx('h-4 w-4 flex-shrink-0 transition-transform', open && 'rotate-180')} />
      </button>
      {open && <p className="pb-4 text-sm text-slate-600 dark:text-slate-400">{item.answer}</p>}
    </div>
  );
}

export default function Faq({ faqs, limit, moreHref }) {
  if (faqs.length === 0) return null;
  const list = limit ? faqs.slice(0, limit) : faqs;

  return (
    <section id="faq" className="max-w-3xl mx-auto px-5 sm:px-8 py-20">
      <SectionHeading eyebrow="faq --common" title="Частые вопросы" />
      <Reveal>
        <div>
          {list.map((item) => (
            <FaqItem key={item.id} item={item} />
          ))}
        </div>
      </Reveal>
      {moreHref && (
        <Reveal className="mt-6">
          <Link href={moreHref} className="text-sm text-emerald-500 font-medium hover:underline">
            Все вопросы →
          </Link>
        </Reveal>
      )}
    </section>
  );
}