"use client";

import type { ReactElement } from "react";

import { TaskList } from "@/components/tasks/TaskList";
import { mockTasks } from "@/lib/api/tasks";

export default function TasksPage(): ReactElement {
  // TODO: Replace with real API call when backend is ready
  // const { data: tasks, isLoading } = useQuery({
  //   queryKey: ["tasks"],
  //   queryFn: fetchTasks,
  // });

  const tasks = mockTasks;
  const isLoading = false;

  return (
    <main className="container mx-auto px-4 py-8">
      <div className="mb-8">
        <h1 className="text-3xl font-bold text-gray-900">Tasks</h1>
        <p className="text-gray-600 mt-2">Organize your work at your own pace</p>
      </div>
      <TaskList tasks={tasks} isLoading={isLoading} />
    </main>
  );
}