import { Select } from 'antd';
import styled from 'styled-components';

const getColor = (data: any) => {
  switch (data?.value) {
    case 1:
      return '#FFF1D6';
    case 2:
      return '#ffcbcb';
    case 3:
      return '#ceffd6';
    default:
      return 'grey';
  }
};

const getStatusColor = (data: any) => {
  switch (data?.value) {
    case 1:
      return '#FEBA30';
    case 2:
      return '#E95252';
    case 3:
      return '#1F9254';
    default:
      return 'grey';
  }
};

const CustomSelectDropdown: any = styled(Select)`
  .ant-select-selector {
    background-color: ${props => getColor(props.value)} !important;
    color: ${props => getStatusColor(props.value)} !important;
    border-color: ${props => getStatusColor(props.value)};
    border-radius: 25px !important;
    border: none !important;
    min-width: 100px;
    padding: 0 10px;
  }
  .ant-select-arrow {
    display: none;
  }
  .ant-select-selection-item {
    font-weight: 600;
    font-size: 12px;
  }
`;

export default CustomSelectDropdown;
