/* The Toast component displays a toast message for success, error, warning, and default notifications. */
import { toast, ToastOptions, ToastPosition } from "react-toastify";
import { getScreenWidth } from "@/src/utils/commonFunctions";
import styles from "./Toast.module.scss";

export type ToastType = "success" | "error" | "warning" | "default";

export const Toast = (type: ToastType, message?: string): void => {

  // Get the screen width
  const width = getScreenWidth()

  // Define the toast options
  const toastOptions: ToastOptions = {
    theme: "light", // Applies a colored theme to all variants
    closeOnClick: true,
    pauseOnHover: true,
    autoClose: 2000, // Close the toast after 2 seconds
    position: (width > 640 ? "bottom-right" : "bottom-center") as ToastPosition, // Adjust position based on screen size
    className: `${styles[`${type}Toast`]}`, // Applies to the outer toast container
    style: {
      fontFamily: "Manrope", // Apply Manrope font to the toast message
    },
  };

  // Switch case for the toast type
  switch (type) {
    case "success":
      toast.success(message || "Operation successful!", toastOptions);
      break;
    case "error":
      toast.error(message || "An unexpected error occurred. Try again, or contact support if the problem persists.", toastOptions);
      break;
    case "warning":
      toast.warn(message || "This is a warning!", toastOptions);
      break;
    default:
      toast(message || "Default notification!", toastOptions);
  }
};