import React, { ReactNode } from "react";
import * as Accordion from '@radix-ui/react-accordion';
import { ChevronDownIcon } from "@radix-ui/react-icons";


interface AccordionTriggerProps {
    children: ReactNode;
    className?: string;
    onClick: React.MouseEventHandler<HTMLHeadingElement> | undefined;
  }
  
export const AccordionTrigger = React.forwardRef<HTMLButtonElement, AccordionTriggerProps>(
    ({ children, className, onClick, ...props }, forwardedRef) => (
      <Accordion.Header className="AccordionHeader" onClick={onClick}>
        <Accordion.Trigger
          className='AccordionTrigger'
          {...props}
          ref={forwardedRef}
        >
          {children}
          <ChevronDownIcon className="AccordionChevron" aria-hidden/>
        </Accordion.Trigger>
      </Accordion.Header>
    )
  );