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

import { accordionVariants } from "./variants"

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

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