"use server";
import React, { Suspense } from "react";
import Link from "next/link";

import { PlusCircle } from "lucide-react";
import { checkEndpointsAvailable } from "@/hooks/checkpageAvaliable";
import { retrieveHeadersAndValidationByEndpoint } from "@/apicalls/validations/validations";
import { TableComponent } from "@/components/commons/Table";
import { PagePropsInterface } from "@/schemas/PageSchema";

const CompaniesPage: React.FC<PagePropsInterface> = async ({
  lang,
  section,
}) => {
  const pageEndpoint = "/account/records/list";
  const availablePageContent = await checkEndpointsAvailable({
    section: section as string,
    lang,
  });
  const tableValidateAndHeaders = await retrieveHeadersAndValidationByEndpoint({
    endpoint: pageEndpoint,
  });

  return (
    <div>
      <Suspense fallback={<div>Account Page is Loading...</div>}>
        <h1 className="mt-8 text-center">
          {availablePageContent?.table?.title}
        </h1>
        <h1 className="mt-4 text-center">
          {availablePageContent?.table?.description}
        </h1>
        <div className="my-6">
          {availablePageContent?.create && (
            <Link
              href={"/account/records/create"}
              className="flex items-center justify-center gap-2 px-4 py-2 bg-slate-500 text-white rounded hover:bg-slate-700"
            >
              <PlusCircle size={16} />
              Create
            </Link>
          )}
        </div>
        <div className="overflow-x-scroll my-6">
          {availablePageContent?.table && (
            <TableComponent
              pageContent={availablePageContent}
              tableValidateAndHeaders={tableValidateAndHeaders}
              apiFunction={() => console.log("apiFunction")}
              redirectTo="/building/update"
            />
          )}
        </div>
      </Suspense>
    </div>
  );
};

export default CompaniesPage;