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

const Opacity = () => {
  const opacity = useSelector((state) => state.badges.badge_settings.opacity);
  const dispatch = useDispatch();
  const handleBadgeSetting = (value) => {
    dispatch(changeBadgeSettingProperties({ name: 'opacity', value }));
  };

  return (
    <div className='wmx-flex wmx-gap-2'>
      <div className='wmx-flex wmx-flex-col wmx-gap-1'>
        <Label htmlFor='opacity'>Opacity:</Label>
        <input
          className='wmx-custom-range wmx-h-9'
          min={0}
          max={100}
          value={opacity}
          onChange={(e) => {
            handleBadgeSetting(Number(e.target.value));
          }}
          type='range'
        />
      </div>
    </div>
  );
};
export default Opacity;
