"use client";

import { IconMoodSad } from "@tabler/icons-react";
import { Group, Text } from "@mantine/core";
import { useMarketplacesContext } from "@/app/clients/drawers/ClientMarketplacesDrawer/contexts/MarketplacesContext";
import useMarketplacesActions from "@/app/clients/drawers/ClientMarketplacesDrawer/hooks/useMarketplaceActions";
import { useMarketplacesTableColumns } from "@/app/clients/drawers/ClientMarketplacesDrawer/hooks/useMarketplacesTableColumns";
import BaseTable from "@/components/ui/BaseTable/BaseTable";
import useIsMobile from "@/hooks/utils/useIsMobile";

const MarketplacesTable = () => {
    const isMobile = useIsMobile();
    const { onUpdateClick } = useMarketplacesActions();
    const { marketplaces, marketplacesCrud } = useMarketplacesContext();

    const columns = useMarketplacesTableColumns({
        onChange: onUpdateClick,
        onDelete: marketplacesCrud.onDelete,
    });

    return (
        <BaseTable
            withTableBorder
            records={marketplaces}
            columns={columns}
            groups={undefined}
            verticalSpacing={"md"}
            mx={isMobile ? "xs" : ""}
            styles={{
                table: {
                    height: "100%",
                },
            }}
            emptyState={
                <Group mt={marketplaces.length === 0 ? "xl" : 0}>
                    <Text>Нет маркетплейсов</Text>
                    <IconMoodSad />
                </Group>
            }
        />
    );
};

export default MarketplacesTable;
