"use client";

import { Heading } from "@/components/ui/heading";
import { Separator } from "@/components/ui/separator";
import React from "react";
import { DataTable } from "./data-table";
import { columns } from "./columns";
import Link from "next/link";
import { Plus } from "lucide-react";
import { buttonVariants } from "@/components/ui/button";
import { Organization } from "@/types/organization";
import { ApiCommunication } from "@/types/api-communication";

const ToolsTable = ({
  apiCommunications,
}: {
  apiCommunications: ApiCommunication[];
}) => {
  return (
    <>
      <div className="flex items-center justify-between">
        <Heading
          title={`Api Communications (${apiCommunications.length})`}
          description="Manage Api Communications"
        />
        <Link
          href="#"
          className={buttonVariants({
            variant: "default",
            // size: "sm",
          })}
          // className="text-xs md:text-sm"
          // onClick={() => router.push(`/admin-dashboard/tools/add`)}
        >
          <Plus className="mr-2 h-4 w-4" />{" "}
          <span className="md:hidden">Add</span>{" "}
          <span className="hidden md:block">Add ApiCommunication</span>
        </Link>
      </div>
      <Separator />
      <DataTable data={apiCommunications} columns={columns} />
      {/* <DataTable data={tasks} columns={columns} /> */}
    </>
  );
};

export default ToolsTable;