import { AdminMessage } from "@repo/db";
import { BaseNotification } from "_components/customToasts/BaseNotification";
import { cn } from "@repo/shared-components";
import { TriangleAlert } from "lucide-react";
import toast, { Toast } from "react-hot-toast";

export const AdminMessageToast = ({ event, t }: { event: AdminMessage; t: Toast }) => {
	const handleClick = () => {
		toast.dismiss(t.id);
	};

	return (
		<BaseNotification icon={<TriangleAlert />} className="flex flex-row">
			<div className="flex-1">
				<h1
					className={cn(
						"font-bold",
						event.status == "ban" && "text-red-500 ",
						event.status == "kick" && "text-yellow-500 ",
					)}
				>
					{event.message}
				</h1>
				<p>{event.data?.reason}</p>
			</div>
			<div className="ml-11">
				<button className="btn" onClick={handleClick}>
					OK
				</button>
			</div>
		</BaseNotification>
	);
};