import React from 'react';
import * as BaseAccordion from '@radix-ui/react-accordion';
import { clsx } from 'clsx';

import { forwardRef } from '../utils/react';
import { Box } from '../box';
import { ChevronDownIcon } from '../icons';
import * as css from './accordion-header.css';

export interface AccordionHeaderProps
  extends Omit<BaseAccordion.AccordionTriggerProps, 'asChild'> {}

export const AccordionHeader = forwardRef<'button', AccordionHeaderProps>(
  ({ children, className, as = 'button', ...rest }, ref) => (
    <BaseAccordion.AccordionTrigger {...rest} asChild>
      <Box as={as} className={clsx(className, css.header)} ref={ref}>
        <span>{children}</span>
        <ChevronDownIcon className={css.icon} />
      </Box>
    </BaseAccordion.AccordionTrigger>
  ),
);