'use client'

import { useState, type ReactNode } from 'react'

export interface GroupFieldProps {
  label: string
  children?: ReactNode
  defaultOpen?: boolean
}

export function GroupField({ label, children, defaultOpen = true }: GroupFieldProps) {
  const [open, setOpen] = useState(defaultOpen)

  return (
    <div className="rounded-md border border-[var(--border)]">
      <button
        type="button"
        onClick={() => setOpen((o) => !o)}
        className="flex w-full items-center justify-between px-4 py-3 text-sm font-medium hover:bg-[var(--accent)]"
      >
        <span>{label}</span>
        <svg
          className={`h-4 w-4 text-[var(--muted-foreground)] transition-transform ${open ? 'rotate-180' : ''}`}
          fill="none"
          viewBox="0 0 24 24"
          stroke="currentColor"
          strokeWidth={2}
        >
          <path strokeLinecap="round" strokeLinejoin="round" d="M19 9l-7 7-7-7" />
        </svg>
      </button>
      {open && (
        <div className="border-t border-[var(--border)] p-4">
          {children ?? <p className="text-sm text-[var(--muted-foreground)]">Group fields area</p>}
        </div>
      )}
    </div>
  )
}
