// CategoryFormFunction.js
import React, { useState } from 'react';
import { createCategory } from '../../services/ApiCategory';

const CategoryFormFunction = ({ fetchCategories }) => {
  const [categoryName, setCategoryName] = useState('');
  const [description, setDescription] = useState('');

  const handleChange = (event) => {
    const { name, value } = event.target;
    if (name === 'name') setCategoryName(value);
    if (name === 'description') setDescription(value);
  };

  const handleSubmit = async (event) => {
    event.preventDefault();
    await createCategory({ name: categoryName, description });
    setCategoryName('');
    setDescription('');
    fetchCategories();
  };

  return (
    <form onSubmit={handleSubmit}>
      <input
        type="text"
        name="name"
        value={categoryName}
        onChange={handleChange}
        placeholder="Category Name"
      />
      <input
        type="text"
        name="description"
        value={description}
        onChange={handleChange}
        placeholder="Category Description"
      />
      <button type="submit">Add Category</button>
    </form>
  );
};

export default CategoryFormFunction;
