const newColor = 'red';

export default function button(token, title, icon) {
    const apiCall = `window.v3plugin.$api({
        api: '/api/table/${token}',
        method: 'delete',
        confirm: {
            title: 'Підтвердити операцію',
            text: 'Ви впевнені що хочете вилучити запис?',
            cancel: 'Скасувати',
            confirm: 'Виконати'
        }
    })`;
    
    const buttonClass = icon
        ? `size-8 inline-flex justify-center items-center gap-x-2 rounded-e-lg border border-stone-200  bg-${newColor}-100 text-stone-800 shadow-sm hover:bg-${newColor}-200 disabled:opacity-50 disabled:pointer-events-none focus:outline-none focus:bg-stone-50 dark:bg-neutral-800 dark:border-neutral-700 dark:text-neutral-300 dark:hover:bg-neutral-700 dark:focus:bg-neutral-700`
        : `px-2 py-1 inline-flex border-solid justify-center items-center gap-2 rounded-md font-semibold focus:outline-none text-sm transition-all border border-transparent hover:text-white ring-offset-white bg-${newColor}-100 text-${newColor}-500 hover:bg-${newColor}-500 focus:ring-${newColor}-500`;
    
    const buttonContent = icon
        ? `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="${newColor}" class="size-3.5">
            <path stroke-linecap="round" stroke-linejoin="round" d="m14.74 9-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 0 1-2.244 2.077H8.084a2.25 2.25 0 0 1-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 0 0-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 0 1 3.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 0 0-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 0 0-7.5 0"/>
        </svg>`
        : `${title || 'Вилучити'}`;
    
    return `<button onclick="${apiCall}" class="${buttonClass}">${buttonContent}</button>`;
}