"use client";

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

const AttributesTable: FC = () => {
    const isMobile = useIsMobile();
    const { attributes } = useAttributesContext();
    const columns = useAttributesTableColumns();

    return (
        <BaseTable
            withTableBorder
            columns={columns}
            records={attributes}
            verticalSpacing={"md"}
            emptyState={
                <Group mt={attributes.length === 0 ? "xl" : 0}>
                    <Text>Нет атрибутов</Text>
                    <IconMoodSad />
                </Group>
            }
            groups={undefined}
            styles={{
                table: {
                    width: "100%",
                },
                header: { zIndex: 1 },
            }}
            mx={isMobile ? "xs" : 0}
        />
    );
};

export default AttributesTable;
