import { useState } from 'react'
import Icon from './Icon'

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

  return (
    <div>
      <div
        onClick={() => setOpen(o => !o)}
        style={{
          display: 'flex',
          alignItems: 'center',
          gap: 6,
          padding: '6px 14px 4px',
          cursor: 'pointer',
          userSelect: 'none',
        }}
      >
        <span style={{
          transform: open ? 'rotate(0deg)' : 'rotate(-90deg)',
          transition: 'transform 0.2s cubic-bezier(0.4, 0, 0.2, 1)',
          color: 'var(--text-muted)',
          display: 'inline-flex',
          marginLeft: -6,
        }}>
          <Icon name="arrow_drop_down" size={18} />
        </span>
        <span style={{
          fontSize: 11, fontWeight: 500,
          color: 'var(--text-primary)',
          letterSpacing: '0.02em',
        }}>{title}</span>
        {badge != null && <span className="chip" style={{ fontSize: 8 }}>{badge}</span>}
        <div style={{ flex: 1, height: 1, background: 'var(--border)', marginLeft: 4 }} />
        {action && <div onClick={e => e.stopPropagation()}>{action}</div>}
      </div>
      {open && children}
    </div>
  )
}