Todo Item

import { TodoItem } from "@/components/ui/TodoItem";

export default function Example() {
  const [completed, setCompleted] = useState(false);

  return (
    <TodoItem
      id="1"
      title="Complete project documentation"
      description="Write comprehensive docs for all components"
      completed={completed}
      priority="high"
      onToggleComplete={(id, value) => setCompleted(value)}
      onClick={(id) => console.log('Todo clicked:', id)}
    />
  );
}

<TodoItem priority="high" {...props} />    {/* Red - Urgent */}
<TodoItem priority="medium" {...props} />  {/* Yellow - Important */}
<TodoItem priority="low" {...props} />     {/* Blue - Normal */}
<TodoItem priority="none" {...props} />    {/* Gray - No priority */}

<TodoItem
  title="Review pull request"
  dueDate="2024-03-15"
  completed={false}
  priority="medium"
  // Shows "Today" if due today (green)
  // Shows "Overdue" if past (red)
  // Shows relative time ("In 3 days") otherwise
/>

const labels = [
  { id: "1", name: "Frontend", color: "#3b82f6" },
  { id: "2", name: "Bug", color: "#ef4444" },
];

<TodoItem
  title="Fix navigation bug"
  labels={labels}
  {...props}
/>

const subtasks = [
  { id: "1", title: "Design mockup", completed: true },
  { id: "2", title: "Implement UI", completed: true },
  { id: "3", title: "Write tests", completed: false },
];

<TodoItem
  title="Build new feature"
  subtasks={subtasks}
  // Shows "2/3 subtasks" badge
  {...props}
/>

const project = {
  id: "proj-1",
  name: "Website Redesign",
  color: "#8b5cf6",
};

<TodoItem
  title="Update homepage"
  project={project}
  {...props}
/>

const [selected, setSelected] = useState<string | null>(null);

<TodoItem
  id="todo-1"
  title="Review code"
  isSelected={selected === "todo-1"}
  onClick={(id) => setSelected(id)}
  {...props}
/>

type TodoPriority = "high" | "medium" | "low" | "none";

interface TodoLabel {
  id: string;
  name: string;
  color?: string;
}

interface TodoSubtask {
  id: string;
  title: string;
  completed: boolean;
}

interface TodoProject {
  id: string;
  name: string;
  color?: string;
}