import toast from 'react-hot-toast';

export const showToast = {
  success: (message: string) => toast.success(message),
  error: (message: string) => toast.error(message),
  loading: (message: string) => toast.loading(message),
  dismiss: (toastId: string) => toast.dismiss(toastId),
  promise: <T,>(
    promise: Promise<T>,
    messages: { loading: string; success: string; error: string }
  ) => toast.promise(promise, messages),
  /**
   * Show a confirmation toast with an Undo button. The toast stays
   * visible for `ms` (default 5000) and the user can click Undo to
   * fire `onUndo`. If the user does nothing, the toast just dismisses.
   */
  undo: (message: string, onUndo: () => void, ms = 5000) => {
    return toast(
      (t) => (
        <span className="flex items-center gap-3">
          <span>{message}</span>
          <button
            type="button"
            onClick={() => {
              onUndo();
              toast.dismiss(t.id);
            }}
            className="font-semibold text-primary-600 hover:text-primary-700 focus:outline-none focus:ring-2 focus:ring-primary-400 rounded px-1"
          >
            Undo
          </button>
        </span>
      ),
      {
        duration: ms,
        icon: '\u2715',
        style: { background: '#fff', color: '#404040' },
      }
    );
  },
};