import React, { useState, useEffect } from "react";
import { IonToast } from "@ionic/react";
import "./Toast.css";

interface ToastProps {
  isOpen?: boolean;
  message: string;
  duration: number;
  position?: "top" | "bottom";
  messageType?: "error" | "success" | "info";
  icon?: string;
}

const Toast: React.FC<ToastProps> = ({
  isOpen = false,
  message,
  duration,
  position = "bottom",
  messageType = "info",
  icon,
}) => {
  const [isOpenState, setIsOpen] = useState(isOpen);

  useEffect(() => {
    setIsOpen(isOpen);
  }, [isOpen]);

  // Define background color based on messageType
  const backgroundColor =
    messageType === "error"
      ? "red-toast"
      : messageType === "success"
      ? "green-toast"
      : "info-toast";

  return (
    <IonToast
      isOpen={isOpenState}
      message={message}
      onDidDismiss={() => setIsOpen(false)}
      duration={duration}
      position={position}
      className={backgroundColor}
      icon={icon}
    />
  );
};

export default Toast;