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

import { AccordionItemProps } from "./AccordionItem/accordionItem"
import { AccordionProps } from "./accordion"
import { accordionVariants } from "./variants"

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