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

export function Expander({ icon: Icon, title, description, defaultOpen = false, children }) {
  const [open, setOpen] = useState(defaultOpen);
  return (
    <div className={`expander ${open ? 'open' : ''}`}>
      <div className="expander-header" onClick={() => setOpen((v) => !v)}>
        {Icon && <Icon size={18} />}
        <div>
          <div className="expander-title">{title}</div>
          {description && <div className="expander-desc">{description}</div>}
        </div>
        <ChevronRight className="chevron" size={16} />
      </div>
      {open && <div className="expander-body">{children}</div>}
    </div>
  );
}