import { getClassNames } from '@websolutespa/bom-core';
import { IconX } from '@websolutespa/bom-mixer-icons';
import React from 'react';
import { Button } from '../../components';

type Props = {
  disabled: boolean;
  onClear: (() => void) | null;
};

export const CustomSelectMultipleValue: React.FC<React.PropsWithChildren<Props>> = ({
  disabled,
  onClear,
  children,
}) => {
  const classNames = getClassNames('multiple-value', { disabled });
  return (
    <Button variant="outline" size="sm" className={classNames} disabled={disabled}>
      <span>{children}</span>
      {!!onClear && <IconX onClick={onClear} />}
    </Button>
  );
};

CustomSelectMultipleValue.displayName = 'CustomSelectMultipleValue';