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

interface TaskItemProps {
    task: Task;
    onDelete: (id: number) => void;
    onToggle: (id: number) => void;
}

export const TaskItem = ({ task, onDelete, onToggle }: TaskItemProps) => {
    return (
        <li className="{`task-item ${task.completed ? 'completed' : ''}`}">
            <input 
                type="checkbox" 
                checked={task.completed}
                onChange={() => onToggle(task.id)}
            />
            <span style={{ textDecoration: task.completed ? 'line-through' : 'none'}}>
                {task.title}
            </span>
            <button onClick={() => onDelete(task.id)}>Delete</button>
        </li>
    );
};