import { IconMoodSad } from "@tabler/icons-react";
import { Group, Text } from "@mantine/core";
import BaseTable from "@/components/ui/BaseTable/BaseTable";
import { useDealTagsContext } from "@/drawers/common/ProjectEditorDrawer/tabs/TagsTab/contexts/DealTagsContext";
import tagsTableColumns from "@/drawers/common/ProjectEditorDrawer/tabs/TagsTab/hooks/tagsTableColumns";
import useDealTagActions from "@/drawers/common/ProjectEditorDrawer/tabs/TagsTab/hooks/useDealTagActions";

const TagsTable = () => {
    const { dealTags, dealTagsCrud } = useDealTagsContext();
    const { onChangeClick } = useDealTagActions();

    const columns = tagsTableColumns({
        onDelete: dealTagsCrud.onDelete,
        onChange: onChangeClick,
    });

    return (
        <BaseTable
            withTableBorder
            records={dealTags}
            columns={columns}
            groups={undefined}
            style={{
                marginInline: "var(--mantine-spacing-xs)",
                minHeight: 200,
            }}
            verticalSpacing={"xs"}
            emptyState={
                <Group mt={dealTags.length === 0 ? "xl" : 0}>
                    <Text>Нет тегов</Text>
                    <IconMoodSad />
                </Group>
            }
        />
    );
};

export default TagsTable;
