"use client";

import { useState } from "react";

type AccordionItem = {
  title: string;
  items: string[];
};

export function Accordion({ items }: { items: AccordionItem[] }) {
  const [open, setOpen] = useState<number | null>(null);

  return (
    <div className="mt-5 space-y-2">
      {items.map((item, index) => {
        const isOpen = open === index;
        return (
          <div key={item.title} className="overflow-hidden border border-[#e8e8e8]">
            <button
              type="button"
              onClick={() => setOpen(isOpen ? null : index)}
              className="flex w-full items-center justify-between bg-[#f7f7f7] px-4 py-3 text-right text-sm font-medium text-[#232323]"
            >
              <span>{item.title}</span>
              <svg
                width="12"
                height="12"
                viewBox="0 0 12 12"
                className={`shrink-0 transition ${isOpen ? "rotate-180" : ""}`}
                aria-hidden
              >
                <path
                  d="M2 4.5 6 8.5 10 4.5"
                  fill="none"
                  stroke="currentColor"
                  strokeWidth="1.5"
                />
              </svg>
            </button>
            {isOpen ? (
              <div className="bg-[#f7f7f7] px-4 pb-4 pt-1 text-sm leading-8 text-[#7b7373]">
                <ul className="space-y-2">
                  {item.items.map((line) => (
                    <li key={line} className="flex gap-2">
                      <span className="mt-2 shrink-0">•</span>
                      <span>{line}</span>
                    </li>
                  ))}
                </ul>
              </div>
            ) : null}
          </div>
        );
      })}
    </div>
  );
}
