"use client";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import TaskTable from "./components/task-ta-table";
import { Button } from "@/components/ui/button";
import { UploadIcon } from "lucide-react";
import SiteBreadcrumb from "@/components/site-breadcrumb";
import { Link } from "@/components/navigation";
import {
  checkAuthorization,
  checkLoginSession,
  getCookiesDecrypt,
} from "@/lib/utils";
import React, { useEffect } from "react";
import { useTranslations } from "next-intl";
import TaskTaTable from "./components/task-ta-table";

const TaskTaPage = () => {
  const t = useTranslations("AnalyticsDashboard");
  useEffect(() => {
    function initState() {
      checkAuthorization("admin"); // Specify the page, e.g., "admin" or another value
      checkLoginSession();
    }

    initState();
  }, []);
  const roleId = Number(getCookiesDecrypt("urie")) || 0;

  return (
    <div>
      <SiteBreadcrumb />
      <div className="space-y-4">
        <Card>
          <CardHeader className="border-b border-solid border-default-200 mb-6">
            <CardTitle>
              <div className="flex flex-col sm:flex-row lg:flex-row lg:items-center">
                <div className="flex-1 text-xl font-medium text-default-900">
                  {t("tabel", { defaultValue: "Tabel" })} {t("task-ta", { defaultValue: "Task Ta" })}
                </div>
                <div className="flex-none">
                  {roleId !== 12 && (
                    <Link href={"/contributor/task-ta/create"}>
                      <Button color="primary" className="text-white">
                        <UploadIcon size={18} className="mr-2" />
                        {t("create-task", { defaultValue: "Create Task" })}
                      </Button>
                    </Link>
                  )}
                </div>
              </div>
            </CardTitle>
          </CardHeader>
          <CardContent className="p-0">
            <TaskTaTable />
          </CardContent>
        </Card>
      </div>
    </div>
  );
};

export default TaskTaPage;