'use client';

import { useState } from 'react';

interface FAQItem {
  q: string;
  a: string;
}

interface FAQProps {
  items: FAQItem[];
}

export default function FAQ({ items }: FAQProps) {
  const [openIndex, setOpenIndex] = useState<number | null>(null);

  const toggle = (index: number) => {
    setOpenIndex(openIndex === index ? null : index);
  };

  return (
    <div className="space-y-3">
      {items.map((item, index) => (
        <div
          key={index}
          className="bg-surface rounded-xl border border-white/10 overflow-hidden transition-colors hover:border-white/20"
        >
          <button
            onClick={() => toggle(index)}
            className="w-full flex items-center justify-between px-6 py-5 text-left"
          >
            <span className="flex items-center gap-3">
              <span className="flex items-center justify-center w-7 h-7 rounded-full bg-primary/15 text-primary text-sm font-bold shrink-0">
                Q
              </span>
              <span className="font-medium text-white text-sm md:text-base">
                {item.q}
              </span>
            </span>
            <span
              className={`text-xl text-gray-400 transition-transform duration-300 shrink-0 ml-4 ${
                openIndex === index ? 'rotate-45' : ''
              }`}
            >
              +
            </span>
          </button>
          <div
            className={`faq-answer ${openIndex === index ? 'open' : ''}`}
          >
            <div className="px-6 pb-5 pl-16">
              <p className="text-sm md:text-base text-gray-400 leading-relaxed">
                {item.a}
              </p>
            </div>
          </div>
        </div>
      ))}
    </div>
  );
}