"use client";

import { useState } from "react";
import { cn } from "@/lib/utils";

type AccordionItem = {
  id: string;
  title: string;
  content: string;
};

type AccordionProps = {
  items: AccordionItem[];
};

export function Accordion({ items }: AccordionProps) {
  const [openItem, setOpenItem] = useState<string | null>(items[0]?.id ?? null);

  return (
    <div className="space-y-3">
      {items.map((item) => {
        const isOpen = item.id === openItem;

        return (
          <section key={item.id} className="overflow-hidden rounded-xl border border-[#dde5f1] bg-white">
            <button
              className="flex w-full items-center justify-between px-4 py-3 text-left"
              onClick={() => setOpenItem(isOpen ? null : item.id)}
              type="button"
            >
              <span className="font-semibold text-[#24324c]">{item.title}</span>
              <span className={cn("text-sm font-semibold text-[#5f6c85]", isOpen ? "rotate-180" : "")}>⌄</span>
            </button>
            {isOpen ? <p className="border-t border-[#edf2f8] px-4 py-3 text-sm text-[#5f6c85]">{item.content}</p> : null}
          </section>
        );
      })}
    </div>
  );
}
