import { IconMoodSad } from "@tabler/icons-react";
import { Group, Text } from "@mantine/core";
import { useAttributesContext } from "@/app/attributes/contexts/AttributesContext";
import useSelectsTableColumns from "@/app/attributes/hooks/useSelectsTableColumns";
import BaseTable from "@/components/ui/BaseTable/BaseTable";
import useIsMobile from "@/hooks/utils/useIsMobile";

const SelectsTable = () => {
    const { selects } = useAttributesContext();
    const isMobile = useIsMobile();
    const columns = useSelectsTableColumns();

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

export default SelectsTable;