"use client";

import { useEffect, useState } from "react";
import { ToastContainer } from "react-toastify";
import "react-toastify/dist/ReactToastify.css";

export default function ToastProvider() {
  const [isHydrated, setIsHydrated] = useState(false);

  const CustomCloseButton = ({ closeToast }: any) => (
  <button
    onClick={closeToast}
    className="text-gray-950/50 hover:text-gray-950 text-lg absolute top-2 right-2"
  >
    ✕
  </button>
);

  useEffect(() => {
    setIsHydrated(true);
  }, []);

  if (!isHydrated) {
    return null;
  }

  return (
    <ToastContainer
      position="bottom-left"
      autoClose={3000}
      hideProgressBar={false}
      newestOnTop={false}
      closeOnClick
      rtl={false}
      icon={false}
      pauseOnFocusLoss
      closeButton={CustomCloseButton}
      draggable
      pauseOnHover
      theme="colored"
      toastClassName={(context) => {
        const base =
          "px-4 pb-4 pt-8 mob-noise bg-gray-100 text-gray-950 text-xs shadow-lg border-1 text-center flex flex-col gap-4 items-center justify-center align-middle";
        const typeStyles: Record<string, string> = {
          default: "border-gray-900/50",
          info: "border-gray-900/50",
          success: "border-gray-900/50",
          warning: "border-gray-900/50",
          error: "border-gray-900/50",
        };
        return `${base} ${typeStyles[context?.type || "default"]}`;
      }}
    />
  );
}