'use client'

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

interface CollapsibleProps {
  title: string
  children: React.ReactNode
  defaultOpen?: boolean
  className?: string
}

export function Collapsible({
  title,
  children,
  defaultOpen = false,
  className,
}: CollapsibleProps) {
  const [isOpen, setIsOpen] = useState(defaultOpen)

  return (
    <div className={cn('border rounded-lg', className)}>
      <Button
        onClick={() => setIsOpen(!isOpen)}
        variant="ghost"
        className="w-full justify-between p-4 h-auto font-semibold hover:bg-accent"
      >
        <span>{title}</span>
        <ChevronDown
          className={cn(
            'h-5 w-5 transition-transform duration-200',
            isOpen && 'transform rotate-180'
          )}
        />
      </Button>
      {isOpen && <div className="p-4 pt-0 border-t">{children}</div>}
    </div>
  )
}