import { Collapsible as CollapsibleBase } from '@base-ui/react/collapsible';
import * as stylex from '@stylexjs/stylex';

import type { ReactNode } from 'react';

import { collapsibleSize, collapsibleStyles } from './styles';
import { CollapsibleSize } from './types';

interface CollapsiblePanelProps {
  children: ReactNode;
  size?: CollapsibleSize;
}

export const CollapsiblePanel = ({
  size = 'medium',
  children,
}: CollapsiblePanelProps) => (
  <CollapsibleBase.Panel
    {...stylex.props(collapsibleStyles.panel, collapsibleSize[size])}
  >
    {children}
  </CollapsibleBase.Panel>
);