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

type ProductCollectionTableProps = {
    onEdit: (collection: ProductCollection) => void;
    onView: (collection: ProductCollection) => void;
    onDelete: (collection: ProductCollection) => void;
};

export const productCollectionColumns = ({ onEdit, onView, onDelete }: ProductCollectionTableProps): DataTableColumn<ProductCollection>[] => [
    {
        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>
        ),
    },
];
