"use client" import { useRef } from "react" import { ChevronDownIcon } from "@/components/Icons" import { getIconByIconName } from "@/components/Icons/get-icon-by-icon-name" import { trackAccordionClick } from "@/utils/tracking" import Body from "../../Text/Body" import Subtitle from "../../Text/Subtitle" import { accordionItemVariants } from "./variants" import styles from "./accordionItem.module.css" import type { AccordionItemProps } from "./accordionItem" export default function AccordionItem({ children, icon, title, theme, variant, className, trackingId, }: AccordionItemProps) { const contentRef = useRef(null) const detailsRef = useRef(null) const IconComp = getIconByIconName(icon) 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 } ) if (trackingId) { trackAccordionClick(trackingId) } } else { content.style.maxHeight = "0" } } } return (
  • {IconComp && ( )} {variant === "sidepeek" ? ( {title} ) : ( {title} )}
    {children}
    • ) }