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

import { forwardRef } from '../utils/react';
import { Box } from '../box';
import { AccordionProvider } from './accordion.context';
import * as css from './accordion.css';

export type AccordionProps = (
  | BaseAccordion.AccordionSingleProps
  | BaseAccordion.AccordionMultipleProps
) & {
  bordered?: boolean;
  collapsible?: boolean;
};

export const Accordion = forwardRef<
  'div',
  AccordionProps,
  AccordionProps & React.RefAttributes<HTMLDivElement>
>(({ className, bordered, children, ...rest }, ref) => (
  <AccordionProvider bordered={bordered}>
    <BaseAccordion.Root {...rest} asChild>
      <Box ref={ref} className={clsx(className, css.accordion)}>
        {children}
      </Box>
    </BaseAccordion.Root>
  </AccordionProvider>
));