import { DataTableColumn } from 'mantine-datatable';
import IconEdit from '../../../components/Icon/IconEdit';
import IconEye from '../../../components/Icon/IconEye';
import IconTrashLines from '../../../components/Icon/IconTrashLines';
import { ProductSize } from '../types/api';

type ProductSizeTableProps = {
    onEdit: (size: ProductSize) => void;
    onView: (size: ProductSize) => void;
    onDelete: (size: ProductSize) => void;
};

export const productSizeColumns = ({ onEdit, onView, onDelete }: ProductSizeTableProps): DataTableColumn<ProductSize>[] => [
    {
        accessor: 'code',
        title: 'Code',
        sortable: true,
    },
    {
        accessor: 'name',
        title: 'Name',
        sortable: true,
    },
    {
        accessor: 'action',
        title: 'Actions',
        sortable: false,
        textAlignment: 'center',
        render: (data) => (
            <div className="flex gap-4 items-center w-max mx-auto">
                <button type="button" className="hover:text-info" onClick={() => onEdit(data)}>
                    <IconEdit className="w-4.5 h-4.5" />
                </button>
                <button type="button" className="hover:text-primary" onClick={() => onView(data)}>
                    <IconEye className="w-4.5 h-4.5" />
                </button>
                <button type="button" className="hover:text-danger" onClick={() => onDelete(data)}>
                    <IconTrashLines className="w-4.5 h-4.5" />
                </button>
            </div>
        ),
    },
];
