import React from 'react';
import PropTypes from 'prop-types';
import { useTheme } from '@mui/material/styles';
import { CheckRounded } from '@mui/icons-material';

import { CUSTOM_TAGS_COLORS } from '../../constants';

import { IconButton, Stack } from '@/mui/components';

import styles from './CategoryColors.module.scss';

function CategoryColors(props) {
  const theme = useTheme();

  return (
    <Stack fullWidth direction="row" spacing={theme.spacing(1, 1)} flexWrap="wrap" className={styles.Wrapper}>
      {CUSTOM_TAGS_COLORS.map((color) => (
        <IconButton
          key={color}
          size="xSmall"
          color="inherit"
          className={styles.ColorButton}
          style={{
            '--internal-custom-color': color,
          }}
          onClick={() => props.onChange(color)}
        >
          {props.selectedColor === color ? <CheckRounded /> : null}
        </IconButton>
      ))}
    </Stack>
  );
}

CategoryColors.propTypes = {
  selectedColor: PropTypes.string.isRequired,
  onChange: PropTypes.func.isRequired,
};

export default CategoryColors;
