import { Input, Card, Button, Space } from 'antd';
import { useEffect, useState } from 'react';
import { connect } from 'react-redux';
import { actionAddCategory } from '../action';

const ACategory = ({addCat}) => {
  const [nameCat, setNameCat] =useState('');
  
  const clearInput = () => { 
    setNameCat(''); 
  }
  
  return (
    <div >
      <Card type="inner" title="Добавить категорию">
        <div>Введите название категории</div>
       <Input onChange={ (e) => setNameCat(e.target.value)}/>
        <Space>
         <Button type="primary" onClick={() => addCat(nameCat)}>Сохранить изменения</Button>
         <Button type="primary" onClick={clearInput} >Очистить поле</Button>
        </Space>
      
      </Card>
    </div>
  )
}

const AddCategory = connect(null, {addCat: actionAddCategory})(ACategory);

export default AddCategory;