import { useMemo } from "react";
import { DataTableColumn } from "mantine-datatable";
import { Center } from "@mantine/core";
import UpdateDeleteTableActions from "@/components/ui/BaseTable/components/UpdateDeleteTableActions";
import DealTag from "@/components/ui/DealTag/DealTag";
import { DealTagSchema } from "@/lib/client";

type Props = {
    onDelete: (tag: DealTagSchema) => void;
    onChange: (tag: DealTagSchema) => void;
};

const useTagsTableColumns = ({ onDelete, onChange }: Props) => {
    return useMemo(
        () =>
            [
                {
                    accessor: "actions",
                    title: <Center>Действия</Center>,
                    width: "0%",
                    render: tag => (
                        <UpdateDeleteTableActions
                            onDelete={() => onDelete(tag)}
                            onChange={() => onChange(tag)}
                        />
                    ),
                },
                {
                    title: "Название",
                    accessor: "name",
                },
                {
                    title: "Цвет",
                    accessor: "tagColor.label",
                },
                {
                    title: "Пример",
                    accessor: "tagColor",
                    render: tag => <DealTag tag={tag} />,
                },
            ] as DataTableColumn<DealTagSchema>[],
        []
    );
};

export default useTagsTableColumns;
