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

export default function CollapsibleSection({ title, icon: Icon, defaultOpen = true, right, children }) {
  const [open, setOpen] = useState(defaultOpen);
  return (
    <div className="border-b border-white/[0.05] last:border-0">
      <button onClick={() => setOpen(o => !o)} className="flex w-full items-center gap-2 py-2.5 text-left">
        <ChevronRight size={13} className={`collapse-chevron text-slate-500 ${open ? 'open' : ''}`} />
        {Icon && <Icon size={13} className="text-cyan-300/70" />}
        <span className="text-[11px] font-semibold uppercase tracking-[0.14em] text-slate-300">{title}</span>
        {right && <span className="ml-auto">{right}</span>}
      </button>
      {open && <div className="space-y-3 pb-3 pl-[22px] pr-1 fade-in">{children}</div>}
    </div>
  );
}