import { DataTableLoading } from "@/components/task-table/data-table-loading";
import { DataTable } from "@/components/task-table/data-table";
import { Suspense } from "react";
import { columns } from "@/components/task-table/columns";
import {
  Card,
  CardContent,
  CardDescription,
  CardFooter,
  CardHeader,
  CardTitle,
} from "@/components/ui/card";

export const dynamic = "force-dynamic";

export default async function Tasks({ tasks }: { tasks: any }) {
  return (
    <Card>
      <CardHeader>
        <CardTitle>Tasks</CardTitle>
      </CardHeader>
      <CardContent>
        <Suspense fallback={<DataTableLoading columnCount={4} />}>
          <div>
            <DataTable data={tasks} columns={columns} />
          </div>
        </Suspense>
      </CardContent>
      <CardFooter></CardFooter>
    </Card>
  );
}