text: /* eslint-disable react/require-default-props */
  /* eslint-disable react/forbid-prop-types */
  import PropTypes from 'prop-types';
  import { Icon } from '@iconify/react';
  import checkmarkFill from '@iconify/icons-eva/checkmark-fill';
  // material
  import { Box, Checkbox } from '@mui/material';
  
  // ----------------------------------------------------------------------
  
  function IconColor({ sx, ...other }) {
    return (
      <Box
        sx={{
          width: 20,
          height: 20,
          display: 'flex',
          borderRadius: '50%',
          position: 'relative',
          alignItems: 'center',
          justifyContent: 'center',
          bgcolor: 'currentColor',
          transition: (theme) =>
            theme.transitions.create('all', {
              duration: theme.transitions.duration.shortest
            }),
          ...sx
        }}
        {...other}
      >
        <Icon icon={checkmarkFill} />
      </Box>
    );
  }
  
  export default function ColorManyPicker({ colors, onChecked, sx, ...other }) {
    return (
      <Box sx={sx}>
        {colors.map((color) => {
          const isWhite = color === '#FFFFFF' || color === 'white';
  
          return (
            <Checkbox
              key={color}
              size="small"
              value={color}
              color="default"
              checked={onChecked(color)}
              icon={
                <IconColor
                  sx={{
                    ...(isWhite && {
                      border: (theme) => `solid 1px ${theme.palette.divider}`
                    })
                  }}
                />
              }
              checkedIcon={
                <IconColor
                  sx={{
                    transform: 'scale(1.4)',
                    '&:before': {
                      opacity: 0.48,
                      width: '100%',
                      content: "''",
                      height: '100%',
                      borderRadius: '50%',
                      position: 'absolute',
                      boxShadow: '4px 4px 8px 0 currentColor'
                    },
                    '& svg': { width: 12, height: 12, color: 'common.white' },
                    ...(isWhite && {
                      border: (theme) => `solid 1px ${theme.palette.divider}`,
                      boxShadow: (theme) => `4px 4px 8px 0 ${theme.palette.grey[500_24]}`,
                      '& svg': { width: 12, height: 12, color: 'common.black' }
                    })
                  }}
                />
              }
              sx={{
                color,
                '&:hover': { opacity: 0.72 }
              }}
              {...other}
            />
          );
        })}
      </Box>
    );
  }
  
  IconColor.propTypes = {
    sx: PropTypes.object
  };
  
  ColorManyPicker.propTypes = {
    colors: PropTypes.array.isRequired,
    onChecked: PropTypes.func,
    sx: PropTypes.object
  };
  