Accordion Component

'use client'

import { useState } from 'react'
import { ChevronDown } from 'lucide-react'
import { clsx } from 'clsx'

interface AccordionItem {
  id: string
  title: string
  content: React.ReactNode
}

interface AccordionProps {
  items: AccordionItem[]
  allowMultiple?: boolean
}

export function Accordion({ items, allowMultiple = false }: AccordionProps) {
  const [expanded, setExpanded] = useState<Set<string>>(new Set())

  const toggle = (id: string) => {
    setExpanded((prev) => {
      const next = new Set(prev)
      if (next.has(id)) {
        next.delete(id)
      } else {
        if (!allowMultiple) next.clear()
        next.add(id)
      }
      return next
    })
  }

  return (
    <div className="divide-y divide-olive-200 rounded-lg border border-olive-200 dark:divide-olive-700 dark:border-olive-700">
      {items.map((item) => {
        const isExpanded = expanded.has(item.id)
        return (
          <div key={item.id}>
            <button
              onClick={() => toggle(item.id)}
              aria-expanded={isExpanded}
              className={clsx(
                'flex w-full items-center justify-between px-4 py-3 text-left',
                'text-olive-950 hover:bg-olive-50 dark:text-white dark:hover:bg-olive-800/50'
              )}
            >
              <span className="font-medium">{item.title}</span>
              <ChevronDown
                className={clsx(
                  'size-5 text-olive-500 transition-transform duration-200',
                  isExpanded && 'rotate-180'
                )}
              />
            </button>
            <div
              className={clsx(
                'grid transition-all duration-200',
                isExpanded ? 'grid-rows-[1fr]' : 'grid-rows-[0fr]'
              )}
            >
              <div className="overflow-hidden">
                <div className="px-4 pb-4 text-olive-600 dark:text-olive-400">
                  {item.content}
                </div>
              </div>
            </div>
          </div>
        )
      })}
    </div>
  )
}