import SiteBreadcrumb from "@/components/site-breadcrumb";
import { Button } from "@/components/ui/button";
import { Link } from "@/i18n/routing";
import { PlusIcon, User } from "lucide-react";
import InternalSpvTable from "../internal/components/internal-table";
import ContactTable from "./components/contact-table";

const ContactPage = async () => {
  return (
    <div>
      <SiteBreadcrumb />
      <div className="space-y-4">
        <div className="w-full overflow-x-auto p-4 rounded-sm space-y-3">
          <div className="flex justify-between py-3 border rounded-md px-3">
            <p className="text-lg font-semibold">Kontak</p>
          </div>
          <div className="flex justify-between py-3">
            <p className="text-lg pl-3 font-semibold">Semua Kontak</p>
            <div>
              <Link href="/supervisor/communications/contact/import-contact">
                <Button color="success" size="md">
                  <PlusIcon />
                  Import
                </Button>
              </Link>{" "}
              <Link href="/supervisor/communications/contact/create">
                <Button color="primary" size="md">
                  <User />
                  Tambah Kontak
                </Button>
              </Link>
            </div>
          </div>

          <ContactTable />
        </div>
      </div>
    </div>
  );
};

export default ContactPage;