import TaskCard from '../TaskCard';
import { Task } from '@shared/schema';

const mockTask: Task = {
  id: '1',
  title: 'Design mobile task interface',
  description: 'Create wireframes and mockups for the mobile-first task management interface',
  status: 'inProgress',
  priority: 'high',
  dueDate: new Date('2024-09-20'),
  timeTracked: 45,
  isTracking: false,
  projectId: 'project-1',
  notes: 'Focus on mobile-first design principles'
};

export default function TaskCardExample() {
  return (
    <div className="p-4 space-y-4">
      <TaskCard task={mockTask} />
      <TaskCard 
        task={{
          ...mockTask,
          id: '2',
          title: 'Quick task without details',
          description: undefined,
          status: 'todo',
          priority: 'low',
          timeTracked: 0
        }} 
      />
    </div>
  );
}