'use client';

import React from 'react';

interface TodoItemProps {
  todo: {
    id: number;
    title: string;
    completed: boolean;
  };
  onToggle: (id: number) => void;
  onDelete: (id: number) => void;
}

const TodoItem: React.FC<TodoItemProps> = ({ todo, onToggle, onDelete }) => {
  return (
    <li className="flex items-center justify-between p-3 bg-white rounded-md shadow-sm mb-2">
      <span
        className={`flex-grow cursor-pointer ${todo.completed ? 'line-through text-gray-500' : ''}`}
        onClick={() => onToggle(todo.id)}
      >
        {todo.title}
      </span>
      <div className="flex items-center space-x-2">
        <input
          type="checkbox"
          checked={todo.completed}
          onChange={() => onToggle(todo.id)}
          className="form-checkbox h-5 w-5 text-blue-600 rounded focus:ring-blue-500"
        />
        <button
          onClick={() => onDelete(todo.id)}
          className="px-3 py-1 bg-red-500 text-white rounded-md hover:bg-red-600 focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-offset-2"
        >
          Supprimer
        </button>
      </div>
    </li>
  );
};

export default TodoItem;