import { useState } from "react"
import type { Task } from "./assets/types/task";

function App() {
  const [tasks, setTasks] = useState<Task[]>([]);
  const [inputValue, setInputValue] = useState<string>('');

  const addTask = () => {
    if (inputValue.trim() === '') return;

    const newTask: Task = {
      id: Date.now(),
      title: inputValue,
      completed: false,
      createdAt: new Date().toISOString()
    };

    setTasks([...tasks, newTask]);

    setInputValue('');
  };

  return (
    <div className="container">
      <h1>SmartX Task Manager</h1>

      <div className="input-group">
        <input 
          type="text"
          value={inputValue}
          onChange={(e) => setInputValue(e.target.value)}
         />
         <button onClick={addTask}>Add</button>
      </div>
      <div className="task-list">
        {tasks.length === 0 ? (
          <p>No task found. Lets add!</p>
        ) : (
          <ul>
            {tasks.map(task => (
              <li key={task.id}>{task.title}</li>
            ))}
          </ul>
        )}
      </div>
    </div>
  )
}

export default App