"use client"

import { useRef } from "react"

import { ChevronDownIcon } from "@/components/Icons"

import { AccordionItemProps } from "./accordionItem"
import { accordionItemVariants } from "./variants"

import styles from "./accordionItem.module.css"

export default function AccordionItem({
  children,
  title,
  variant,
}: AccordionItemProps) {
  const contentRef = useRef<HTMLDivElement>(null)
  const detailsRef = useRef<HTMLDetailsElement>(null)

  function toggleAccordion() {
    const details = detailsRef.current
    const content = contentRef.current
    if (details && content) {
      if (details.open) {
        content.style.maxHeight = `${content.scrollHeight}px`
        content.addEventListener(
          "transitionend",
          () => {
            // Remove maxHeight after transition to allow content to transition multiple times
            content.style.maxHeight = "none"
          },
          { once: true }
        )
      } else {
        content.style.maxHeight = "0"
      }
    }
  }

  return (
    <li className={accordionItemVariants({ variant })}>
      <details ref={detailsRef} onToggle={toggleAccordion}>
        <summary className={styles.summary}>
          <span>{title}</span>
          <ChevronDownIcon className={styles.chevron} color="burgundy" />
        </summary>
        <div ref={contentRef} className={styles.content}>
          {children}
        </div>
      </details>
    </li>
  )
}