import { AlertTriangle, CheckCircle2, Info, X, XCircle } from "lucide-react";
import React from "react";
import { toast } from "sonner";
type ToastType = "success" | "error" | "warning" | "info";

interface ToastNoticeProps {
	t: string | number;
	type?: ToastType;
	title: string;
	message?: string;
}

const TOAST_CONFIG: Record<
	ToastType,
	{ icon: React.ReactNode; iconColor: string }
> = {
	success: {
		icon: <CheckCircle2 className="h-[22px] w-[22px]" />,
		iconColor: "text-[#22C55E]",
	},
	error: {
		icon: <XCircle className="h-[22px] w-[22px]" />,
		iconColor: "text-[#FF4F55]",
	},
	warning: {
		icon: <AlertTriangle className="h-[22px] w-[22px]" />,
		iconColor: "text-[#F59E0B]",
	},
	info: {
		icon: <Info className="h-[22px] w-[22px]" />,
		iconColor: "text-[#3B82F6]",
	},
};

const ToastNotice = ({
	t,
	type = "info",
	title,
	message,
}: ToastNoticeProps) => {
	const { icon, iconColor } = TOAST_CONFIG[type];

	return (
		<div className="flex items-start gap-[14px] rounded-[4px] bg-[#3A3939] text-white pl-4 pr-3 py-[14px] shadow-lg w-[356px]">
			<span className={`shrink-0 mt-0.5 ${iconColor}`}>{icon}</span>

			<div className="flex flex-col gap-0.5 flex-1">
				<span className="text-[15px] leading-6 font-semibold">
					{title}
				</span>
				{message && (
					<span className="text-[14px] leading-6 text-gray-300">
						{message}
					</span>
				)}
			</div>

			<button
				onClick={() => toast.dismiss(t)}
				className="ml-auto shrink-0 rounded text-gray-400 hover:text-white transition-colors"
			>
				<X size={16} />
			</button>
		</div>
	);
};

export const showToast = (type: ToastType, title: string, message?: string) => {
	toast.custom((t) => (
		<ToastNotice t={t} type={type} title={title} message={message} />
	));
};

export const successToast = (title: string, message?: string) =>
	showToast("success", title, message);
export const errorToast = (title: string, message?: string) =>
	showToast("error", title, message);
export const warningToast = (title: string, message?: string) =>
	showToast("warning", title, message);
export const infoToast = (title: string, message?: string) =>
	showToast("info", title, message);

export default ToastNotice;