import { useDispatch, useSelector } from 'react-redux';
import Input from '../../../../components/Input';
import SectionContainer from '../../../../components/SectionContainer';
import { changeFilterName } from '../../../../features/filters/filtersSlice';

const FilterName = () => {
  const dispatch = useDispatch();
  const { name } = useSelector((state) => state.filters);
  return (
    <SectionContainer>
      <div className='wmx-flex wmx-flex-col wmx-gap-2'>
        <div>
          <label className='wmx-block wmx-mb-1 wmx-text-lg wmx-font-medium' htmlFor='badge_name'>
            Filter Title<span className='wmx-text-red-500 wmx-text-xl'>*</span>
          </label>
          <Input
            id='badge_name'
            value={name}
            className='wmx-w-96'
            onChange={(e) => {
              dispatch(changeFilterName(e.target.value));
            }}
            placeholder='Your Filter Title'
          />
        </div>
      </div>
    </SectionContainer>
  );
};
export default FilterName;
