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="Добавить категорию товара">
      <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;