import { Children, cloneElement, isValidElement } from 'react'

import type { VariantProps } from 'class-variance-authority'

import type { AccordionItemProps } from './AccordionItem'
import { accordionVariants } from './variants'

interface AccordionProps
  extends React.HtmlHTMLAttributes<HTMLUListElement>,
    VariantProps<typeof accordionVariants> {}

export default function Accordion({
  children,
  className,
  type,
}: AccordionProps) {
  return (
    <ul className={accordionVariants({ className, type })}>
      {Children.map(children, (child) => {
        if (isValidElement<AccordionItemProps>(child)) {
          return cloneElement(child, { type })
        } else {
          return child
        }
      })}
    </ul>
  )
}