Untitled

"use client";

import { cn } from "@/common/helpers/cn";
import ProfileUpdate from "@/module/Profile";
import { Check, LucideAlertTriangle, LucideCheck, LucideInfo, LucideX } from "lucide-react";
import toast from "react-hot-toast";

const colorMap = {
  "danger": "asdfasdf",
  "info": "asdfasdf",
  "success": "asdfasdf",
  "alert": "asdfasdf",
}


const mainIconMap = {
  "danger": (
    <LucideX
      strokeWidth={1.5}
      className="text-white bg-danger-400 rounded-full"
      size={18}
    />
  ),
  "info": (
    <LucideInfo strokeWidth={2} className="text-info-500" size={25} />
  ),
  "success": (
    <LucideCheck
      strokeWidth={2}
      className="text-white bg-success-500 rounded-full p-1"
      size={20}
    />
  ),
  "alert": (
    <LucideAlertTriangle
      strokeWidth={2}
      className="text-warning-500"
      size={25}
    />
  ),
}

const Notification = ({ type, message }: { type: 'danger' | 'alert' | 'success' | 'info', message: string }) => {
  return toast.custom((t) => (
    <div
      className={cn(
        t.visible ? "animate-enter" : "animate-leave",
        type === "danger" && "bg-danger-100",
        type === "alert" && "bg-warning-100",
        type === "success" && "bg-success-100",
        type === "info" && "bg-info-100",
        "shadow-lg rounded-lg flex"
      )}
    >
      <div className="px-4 py-4 flex items-center justify-between space-x-12">
        <div className="flex items-center justify-center space-x-4">
          {mainIconMap[type]}
          <p 
            className={cn(
              "flex-1",
              type === "danger" && "text-danger-400",
              type === "alert" && "text-warning-400",
              type === "success" && "text-success-400",
              type === "info" && "text-info-400",
            )}
          >{message}</p>
        </div>
        <div className="flex-shrink-0">
          <LucideX
            size={20}
            strokeWidth={1.5}
            className={cn(
              "cursor-pointer",
              type === "danger" && "text-danger-400",
              type === "alert" && "text-warning-400",
              type === "success" && "text-success-400",
              type === "info" && "text-info-400",
            )}
            onClick={() => toast.dismiss(t.id)}
          />
        </div>
      </div>
    </div>
  ));
};

export default Notification;