import { useState } from 'react'
import { ChevronDown } from 'lucide-react'
import { cn } from '@/lib/utils'

interface SectionGroupProps {
  title: string
  count?: number
  defaultOpen?: boolean
  delay?: number
  children: React.ReactNode
}

export function SectionGroup({ title, count, defaultOpen = true, delay = 150, children }: SectionGroupProps) {
  const [open, setOpen] = useState(defaultOpen)

  return (
    <div className="fade-in" style={{ animationDelay: `${delay}ms` }}>
      <button
        onClick={() => setOpen(!open)}
        className="flex w-full items-center gap-2 py-2"
      >
        <span className="h-2 w-2 shrink-0 rounded-full bg-gradient-brand" />
        <span className="font-heading text-[0.8125rem] font-bold uppercase tracking-[0.04em] text-foreground">
          {title}
        </span>
        {count !== undefined && (
          <span className="rounded-full bg-secondary px-2 py-0.5 font-label text-[0.6875rem] text-muted-foreground">
            {count}
          </span>
        )}
        <div className="flex-1" />
        <ChevronDown
          size={14}
          className={cn('text-muted-foreground transition-transform', !open && '-rotate-90')}
        />
      </button>
      {open && <div className="mt-1 space-y-1">{children}</div>}
    </div>
  )
}