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

type ProductColourTableProps = {
    onEdit: (colour: ProductColour) => void;
    onView: (colour: ProductColour) => void;
    onDelete: (colour: ProductColour) => void;
};

export const productColourColumns = ({ onEdit, onView, onDelete }: ProductColourTableProps): DataTableColumn<ProductColour>[] => [
    {
        accessor: 'code',
        title: 'Code',
        sortable: true,
    },
    {
        accessor: 'name',
        title: 'Name',
        sortable: true,
    },
    {
        accessor: 'hex',
        title: 'Hex',
        sortable: true,
        // rounded circle and hex
        render: (data) => (
            <div className="flex items-center gap-2">
                <div className="w-4 h-4 rounded-full" style={{ backgroundColor: data.hex }}></div>
                {data.hex}
            </div>
        ),
    },
    {
        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>
        ),
    },
];
