"use client";
import { useState } from "react";

interface AccordionItem {
  question: string;
  answer: string;
}

export default function Accordion({ items }: { items: AccordionItem[] }) {
  const [active, setActive] = useState(null);

  const toggle = (index: any) => {
    setActive(active === index ? null : index);
  };

  return (
    <div className="space-y-4">
      {items.map((item, index) => (
        <div
          key={index}
          className="border rounded-lg p-4 hover:shadow transition-all"
        >
          <button
            className="w-full text-left flex justify-between items-center"
            onClick={() => toggle(index)}
          >
            <span className="font-medium text-lg">{item.question}</span>
            <span className="text-xl">
              {active === index ? "−" : "+"}
            </span>
          </button>

          {active === index && (
            <div className="mt-3 text-gray-700 leading-relaxed">
              {item.answer}
            </div>
          )}
        </div>
      ))}
    </div>
  );
}