import React from 'react';
import TaskItem from './TaskItem';

interface Task {
  id: string;
  title: string;
  description?: string;
  completed: boolean;
  startTime?: string;
  endTime?: string;
  dayOfWeek?: number; // 0 = Sunday, 1 = Monday, etc.
  isRolling?: boolean;
  createdAt: Date;
  updatedAt: Date;
}

interface TaskListProps {
  tasks: Task[];
  onTaskToggleComplete?: (id: string) => void;
  onTaskDelete?: (id: string) => void;
  onTaskEdit?: (task: Task) => void;
  onTaskClick?: (task: Task) => void;
  onTaskToggleRolling?: (id: string) => void;
}

const TaskList: React.FC<TaskListProps> = ({
  tasks,
  onTaskToggleComplete,
  onTaskDelete,
  onTaskEdit,
  onTaskClick,
  onTaskToggleRolling
}) => {
  if (tasks.length === 0) {
    return (
      <div className="empty-state text-center py-8 bg-gray-50 rounded-lg border border-gray-200">
        <div className="mb-3">
          <svg xmlns="http://www.w3.org/2000/svg" className="h-12 w-12 mx-auto text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2" />
          </svg>
        </div>
        <p className="text-gray-600">No tasks for this day</p>
        <p className="text-sm text-gray-500 mt-1">Add a new task using the form above</p>
      </div>
    );
  }

  return (
    <ul className="task-list space-y-2">
      {tasks.map((task) => (
        <li key={task.id}>
          <TaskItem
            task={task}
            onToggleComplete={onTaskToggleComplete || (() => { })}
            onDelete={onTaskDelete || (() => { })}
            onEdit={onTaskEdit || (() => { })}
            onToggleRolling={onTaskToggleRolling || (() => { })}
          />
        </li>
      ))}
    </ul>
  );
};

export default TaskList;