import { useDispatch, useSelector } from 'react-redux';
import { changeBadgeSettingProperties } from '../../../../../../../features/badges/badgesSlice';

import CustomPicker from './components/CustomPicker';

const BadgeColors = () => {
  const dispatch = useDispatch();
  const { badge_settings } = useSelector((state) => state.badges);

  const handleBadgeColorChange = (name, value) => {
    dispatch(changeBadgeSettingProperties({ name, value }));
  };

  const colorPickers = [
    { label: 'Background Color', key: 'background', hideControls: false },
    { label: 'Text Color', key: 'color', hideControls: true },
    { label: 'Border Color', key: 'borderColor', hideControls: true },
  ];

  return (
    <div className='wmx-flex wmx-rounded-lg wmx-gap-6 wmx-items-center wmx-border wmx-border-gray-300 wmx-p-4 wmx-pt-3'>
      {colorPickers.map(({ label, key, hideControls }) => (
        <CustomPicker
          key={key}
          label={label}
          value={badge_settings[key]}
          onChange={(value) => handleBadgeColorChange(key, value)}
          hideControls={hideControls}
        />
      ))}
    </div>
  );
};

export default BadgeColors;
