import { useState } from 'react'

/**
 * Collapsible section wrapper for engine design input groups.
 */
export default function DesignSection({ title, children, defaultOpen = true, headerAction }) {
  const [open, setOpen] = useState(defaultOpen)

  return (
    <div className="border border-slate-700 rounded-lg overflow-hidden mb-4">
      <div className="w-full flex items-center justify-between px-4 py-3 bg-slate-800 hover:bg-slate-700 text-left transition-colors group">
        <button
          onClick={() => setOpen(o => !o)}
          className="flex items-center gap-2 flex-1"
        >
          <span className="text-sm font-semibold text-slate-200">{title}</span>
          <span className="text-slate-400 text-xs select-none">{open ? '▲' : '▼'}</span>
        </button>
        {headerAction && (
          <div className="ml-auto opacity-0 group-hover:opacity-100 transition-opacity">
            {headerAction}
          </div>
        )}
      </div>
      {open && (
        <div className="p-4 bg-slate-900 space-y-3">
          {children}
        </div>
      )}
    </div>
  )
}