import { useState } from 'react';
import { ChevronDown } from 'lucide-react';

interface AccordionItem {
  title: string;
  content: string;
}

interface ProductAccordionProps {
  items: AccordionItem[];
  defaultOpen?: number;
}

export default function ProductAccordion({ items, defaultOpen }: ProductAccordionProps) {
  const [openIndex, setOpenIndex] = useState(defaultOpen ?? null);

  return (
    <div className="border rounded-lg overflow-hidden">
      {items.map((item, index) => (
        <div key={index} className="border-b last:border-b-0">
          <button
            onClick={() => setOpenIndex(openIndex === index ? null : index)}
            className="w-full px-4 py-3 flex justify-between items-center bg-gray-50 hover:bg-gray-100"
          >
            <span className="font-medium">{item.title}</span>
            <ChevronDown
              className={`w-5 h-5 transition-transform ${openIndex === index ? 'rotate-180' : ''}`}
            />
          </button>
          {openIndex === index && (
            <div className="px-4 py-3 text-gray-600">
              {item.content}
            </div>
          )}
        </div>
      ))}
    </div>
  );
}
