Basic Accordion

"use client";
import { useState } from "react";
import { ChevronDown } from "lucide-react";

export function Accordion({ items }: { items: { title: string; body: string }[] }) {
  const [open, setOpen] = useState<number | null>(null);
  return (
    <div className="space-y-2">
      {items.map((item, i) => (
        <div key={i} className="rounded-lg border border-border">
          <button onClick={() => setOpen(open === i ? null : i)}
            className="flex w-full items-center justify-between px-4 py-3 text-sm font-medium">
            <span>{item.title}</span>
            <ChevronDown className={`size-4 transition-transform ${open === i ? "rotate-180" : ""}`} />
          </button>
          {open === i && <div className="px-4 pb-3 text-sm text-muted-foreground">{item.body}</div>}
        </div>
      ))}
    </div>
  );
}