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 * as css from './accordion-content.css';

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

export const AccordionContent = forwardRef<'div', AccordionContentProps>(
  ({ children, className, ...rest }, ref) => (
    <BaseAccordion.AccordionContent {...rest} asChild>
      <Box className={clsx(className, css.container)} ref={ref}>
        <Box className={css.content}>{children}</Box>
      </Box>
    </BaseAccordion.AccordionContent>
  ),
);