import { styled } from '@mui/material';
import Select from 'antd/es/select';
import 'antd/es/select/style/index';

interface SelectPickerProps {
  value: string[];
  onChange: (value: string[]) => void;
  className?: string;
}

export const SelectPickerCom = ({ value, onChange, className }: SelectPickerProps) => {
  return <Select className={className} style={{ width: '100%' }} popupClassName='hidden' showSearch={false} mode='tags' value={value} onChange={onChange} />;
};
export const SelectPicker = styled(SelectPickerCom)(({ theme }) => ({

  '& .ant-select-selection-item': {
    backgroundColor: 'var(--color-primary) !important',
    color: 'white !important',
  },
  '& svg': {
    color: 'white !important',
  },
  '& svg:hover': {
    color: '#ccc !important',
  },
  '& .ant-select-arrow': {
    // color: 'var(--color-primary) !important',
    display: 'none !important',
  },
}));