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

const BadgeName = () => {
  const dispatch = useDispatch();
  const { badge_name } = useSelector((state) => state.badges);
  return (
    <div>
      <Label htmlFor='badge_name'>
        Badge Name<span className='wmx-text-red-500 wmx-text-xl'>*</span>:
      </Label>
      <Input
        id='badge_name'
        value={badge_name}
        className='wmx-w-full wmx-mb-3 wmx-mt-1'
        onChange={(e) => dispatch(changeBadgeBaseProperties({ name: 'badge_name', value: e.target.value }))}
        placeholder='Badge Title'
      />
    </div>
  );
};
export default BadgeName;
