'use client'

import React, { useState } from 'react'
import { AnimatePresence, motion } from 'framer-motion'
import { cn } from '@/lib/utils'

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

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

const Accordion: React.FC<AccordionProps> = ({
  items,
  allowMultiple = false,
  defaultOpen = [],
  className,
}) => {
  const [openIds, setOpenIds] = useState<string[]>(defaultOpen)

  const toggle = (id: string) => {
setOpenIds((prev) => {
  if (prev.includes(id)) {
    return prev.filter((i) => i !== id)
  }
  return allowMultiple ? [...prev, id] : [id]
})
  }

  return (
<div
  className={cn(
    'rounded-xl border border-border bg-obsidian overflow-hidden divide-y divide-border',
    className
  )}
>
  {items.map((item) => {
    const isOpen = openIds.includes(item.id)

    return (
      <div key={item.id}>
        <button
          type="button"
          onClick={() => toggle(item.id)}
          className="flex w-full items-center justify-between px-5 py-4 cursor-pointer transition-colors hover:bg-ignite/5"
        >
          <span className="text-sm font-medium text-chalk">{item.title}</span>
          <motion.svg
            xmlns="http://www.w3.org/2000/svg"
            width="16" height="16" viewBox="0 0 24 24"
            fill="none" stroke="currentColor" strokeWidth="2"
            strokeLinecap="round" strokeLinejoin="round"
            className="text-blush"
            animate={{ rotate: isOpen ? 180 : 0 }}
            transition={{ duration: 0.3, ease: 'easeInOut' }}
          >
            <polyline points="6 9 12 15 18 9" />
          </motion.svg>
        </button>
        <AnimatePresence initial={false}>
          {isOpen && (
            <motion.div
              key="content"
              initial={{ height: 0, opacity: 0 }}
              animate={{ height: 'auto', opacity: 1 }}
              exit={{ height: 0, opacity: 0 }}
              transition={{ duration: 0.3, ease: 'easeInOut' }}
              className="overflow-hidden"
            >
              <div className="px-5 pb-4 text-sm leading-relaxed text-blush">
                {item.content}
              </div>
            </motion.div>
          )}
        </AnimatePresence>
      </div>
    )
  })}
</div>
  )
}

export default Accordion

Prop	Type	Default	Description
`items`	`AccordionItem[]`	`—`	Array of accordion items with id, title, and content.
`allowMultiple`	`boolean`	`false`	Whether multiple panels can be open simultaneously.
`defaultOpen`	`string[]`	`[]`	Array of item ids to open by default.
`className`	`string`	`''`	Additional CSS classes.