import React from 'react';
import { Group } from 'react-aria-components';
import classNames from 'classnames';

import type { Size } from '../../../types';

interface MultiSelectContentProps extends React.PropsWithChildren {
  id?: string;
  width?: Size | 'auto';
  isDisabled?: boolean;
  'aria-label'?: string;
}

export const MultiSelectContent: React.FC<MultiSelectContentProps> = ({
  id,
  width,
  children,
  isDisabled,
  'aria-label': ariaLabel,
  ...rest
}) => {
  return (
    <Group
      {...rest}
      id={id}
      className={classNames('multiSelectField__content', {
        [`${width}`]: width !== 'auto',
      })}
      isDisabled={isDisabled}
      aria-label={ariaLabel}
    >
      {children}
    </Group>
  );
};