"use client";

import { FC } from "react";
import { useClientsTableColumns } from "@/app/clients/components/shared/ClientsTable/columns";
import { useClientsContext } from "@/app/clients/contexts/ClientsContext";
import useClientsActions from "@/app/clients/hooks/useClientsActions";
import BaseTable from "@/components/ui/BaseTable/BaseTable";
import useIsMobile from "@/hooks/utils/useIsMobile";

const ClientsTable: FC = () => {
    const isMobile = useIsMobile();
    const { clientsCrud, clients } = useClientsContext();
    const { onUpdateClick } = useClientsActions();

    const columns = useClientsTableColumns({
        onDelete: clientsCrud.onDelete,
        onChange: onUpdateClick,
    });

    return (
        <BaseTable
            withTableBorder
            records={clients}
            columns={columns}
            verticalSpacing={"md"}
            mx={isMobile ? "xs" : 0}
            groups={undefined}
        />
    );
};

export default ClientsTable;