import {
	Bug,
	CircleAlert,
	CircleCheckBig,
	CircleHelp,
	MessageSquareText,
	Minus,
	OctagonX,
	Plus,
} from "lucide-react";
import React from "react";

export enum toastType {
	info = "info",
	warn = "warn",
	error = "error",
	refused = "refused",
	success = "success",
	add = "add",
	del = "del",
	message = "message",
}

export function ToastBox({
	title,
	message,
	type,
}: { title?: string; message: string; type: toastType }) {
	let icon: any;
	let bgColor: string;
	switch (type) {
		case toastType.message:
			icon = <MessageSquareText />;
			bgColor = "bg-accent";
			break;
		case toastType.add:
			icon = <Plus />;
			bgColor = "bg-accent";
			break;
		case toastType.del:
			icon = <Minus />;
			bgColor = "bg-accent";
			break;
		case toastType.info:
			icon = <CircleHelp />;
			bgColor = "bg-accent";
			break;
		case toastType.warn:
			icon = <CircleAlert />;
			bgColor = "bg-orange-500";
			break;
		case toastType.error:
			icon = <Bug />;
			bgColor = "bg-red-500";
			break;
		case toastType.success:
			icon = <CircleCheckBig />;
			bgColor = "bg-green-500";
			break;
		case toastType.refused:
			icon = <OctagonX />;
			bgColor = "bg-red-700";
			break;
	}

	return (
		<div
			className={`flex flex-row items-center gap-2 scale-90 md:scale-100 p-2 rounded border ${bgColor}`}
		>
			{icon}
			<div className={"flex flex-col justify-center items-start"}>
				{title && <h3 className={"text-nowrap font-bold text-xl"}>{title}</h3>}
				<p className={"text-wrap"}>{message}</p>
			</div>
		</div>
	);
}