ERitors-Scribe-Desktop/components/form/DeleteButton.tsx

'use client';
import {useState} from 'react';
import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';
import {faTrash} from '@fortawesome/free-solid-svg-icons';
import AlertBox from '@/components/AlertBox';

interface DeleteButtonProps {
    onDelete: () => void | Promise<void>;
    confirmTitle: string;
    confirmMessage: string;
    confirmButtonText: string;
    cancelButtonText: string;
    disabled?: boolean;
    className?: string;
}

export default function DeleteButton(
    {
        onDelete,
        confirmTitle,
        confirmMessage,
        confirmButtonText,
        cancelButtonText,
        disabled = false,
        className = ''
    }: DeleteButtonProps
) {
    const [showConfirm, setShowConfirm] = useState<boolean>(false);

    function handlePress(): void {
        if (disabled) return;
        setShowConfirm(true);
    }

    async function handleConfirm(): Promise<void> {
        setShowConfirm(false);
        await onDelete();
    }

    function handleCancel(): void {
        setShowConfirm(false);
    }

    return (
        <>
            <button
                onClick={handlePress}
                disabled={disabled}
                className={`flex items-center justify-center bg-error/90 hover:bg-error w-10 h-10 rounded-xl border border-error shadow-md hover:shadow-lg hover:scale-110 transition-all duration-200 ${disabled ? 'opacity-50 cursor-not-allowed' : ''} ${className}`}
            >
                <FontAwesomeIcon icon={faTrash} className="text-text-primary w-5 h-5"/>
            </button>
            {showConfirm && (
                <AlertBox
                    title={confirmTitle}
                    message={confirmMessage}
                    type="danger"
                    confirmText={confirmButtonText}
                    cancelText={cancelButtonText}
                    onConfirm={handleConfirm}
                    onCancel={handleCancel}
                />
            )}
        </>
    );
}