import React, { useState } from 'react';
import { useDispatch } from 'react-redux';
import { addTodo } from '../features/todo/todoSlice';

const AddTodoForm = () => {
  const dispatch = useDispatch();
  const [input, setInput] = useState('');

  const handleAddTodo = () => {
    if (input.trim()) {
      dispatch(addTodo(input));
      setInput('');
    }
  };

  return (
    <div className="max-w-md mx-auto mt-6">
      <div className="flex space-x-4">
        <input
          type="text"
          value={input}
          onChange={(e) => setInput(e.target.value)}
          className="px-4 py-2 w-full rounded-l-md border"
          placeholder="Add a new ToDo Item...!"
        />
        <button
          onClick={handleAddTodo}
          className="bg-blue-500 px-6 py-2 rounded-r-md text-white font-semibold hover:bg-blue-600"
        >
          Add Items in your List
        </button>
      </div>
    </div>
  );
};

export default AddTodoForm;