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

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

  return (
    <div className='wmx-flex wmx-gap-2'>
      <div className='wmx-flex wmx-flex-col wmx-gap-1'>
        <Label htmlFor='z-index' tooltipContent='Sets element stack order; higher values appear on top.'>
          Z-Index:
        </Label>
        <Input
          className='!wmx-outline-none wmx-w-36 focus:!wmx-shadow-none'
          id='z-index'
          type='number'
          value={badge_settings.zIndex}
          onChange={(e) => handleBadgeSetting(e.target.value)}
        />
      </div>
    </div>
  );
};
export default ZIndex;
