import TaskList from '../TaskList';
import { Task } from '../TaskCard';
import { addDays, subDays } from 'date-fns';

const mockTasks: Task[] = [
  {
    id: '1',
    title: 'Review quarterly reports',
    description: 'Analyze Q3 performance metrics and prepare summary',
    status: 'todo',
    priority: 'high',
    dueDate: addDays(new Date(), 2),
    timeTracked: 0,
    isTracking: false,
    projectId: 'project-1'
  },
  {
    id: '2',
    title: 'Update website copy',
    description: 'Revise landing page content based on user feedback',
    status: 'inProgress',
    priority: 'medium',
    dueDate: addDays(new Date(), 5),
    timeTracked: 90,
    isTracking: true,
    projectId: 'project-2'
  },
  {
    id: '3',
    title: 'Team standup meeting',
    status: 'todo',
    priority: 'low',
    dueDate: new Date(),
    timeTracked: 0,
    isTracking: false
  },
  {
    id: '4',
    title: 'Fix login bug',
    description: 'Users unable to login with special characters in password',
    status: 'todo',
    priority: 'high',
    dueDate: subDays(new Date(), 1), // Overdue
    timeTracked: 30,
    isTracking: false,
    projectId: 'project-2'
  },
  {
    id: '5',
    title: 'Deploy new features',
    status: 'done',
    priority: 'medium',
    dueDate: subDays(new Date(), 2),
    timeTracked: 120,
    isTracking: false,
    projectId: 'project-1'
  },
  {
    id: '6',
    title: 'Write documentation',
    description: 'Document new API endpoints for external developers',
    status: 'inProgress',
    priority: 'medium',
    dueDate: addDays(new Date(), 7),
    timeTracked: 60,
    isTracking: false,
    projectId: 'project-1'
  }
];

export default function TaskListExample() {
  return (
    <div className="p-4">
      <TaskList tasks={mockTasks} />
    </div>
  );
}