My-Weekly-ToDo-List/src/components/WeeklyTaskItem.tsx

import React from 'react';

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

interface WeeklyTaskItemProps {
  task: Task;
  onClick?: () => void;
}

const WeeklyTaskItem: React.FC<WeeklyTaskItemProps> = ({ task, onClick }) => {
  const handleTaskClick = () => {
    if (onClick) {
      onClick();
    }
  };

  return (
    <div 
      className={`task-item ${task.completed ? 'completed' : ''} weekly-task`}
      onClick={handleTaskClick}
    >
      <h4>{task.title}</h4>
      {task.description && <p>{task.description}</p>}
      {task.startTime && task.endTime && (
        <div className="time-indicator">
          <span>{task.startTime} - {task.endTime}</span>
        </div>
      )}
    </div>
  );
};

export default WeeklyTaskItem;