import { useState } from 'react'
import { ChevronDown, ChevronRight } from 'lucide-react'

export default function CollapsibleSection({ title, defaultOpen = true, badge, children, noBorder }) {
  const [open, setOpen] = useState(defaultOpen)

  return (
    <div className={noBorder ? '' : 'border-b border-border'}>
      <button
        onClick={() => setOpen(!open)}
        className="w-full flex items-center gap-2 px-5 py-3 text-sm font-semibold text-text-primary hover:bg-surface-secondary transition-colors"
      >
        {open ? <ChevronDown className="w-4 h-4" /> : <ChevronRight className="w-4 h-4" />}
        {title}
        {badge}
      </button>
      <div className={`collapsible-content ${open ? 'is-open' : ''}`}>
        <div className="collapsible-inner">
          {children}
        </div>
      </div>
    </div>
  )
}