import { motion } from "framer-motion";

import { ToastCheck, ToastFail, ToastWarn } from "@components/common/Icons";
import { useTheme } from "@hooks/useTheme";
import type { Toast, ToastType } from "@providers/ToastProvider";
import { getBorderRadius } from "@utils/getBorderRadius";

function getTextColor(type: ToastType) {
	if (type === "error") return "bn-text-accent-4";
	if (type === "success") return "bn-text-accent-3";
	if (type === "info") return "bn-text-accent-1";
	return "bn-text-accent-2";
}

function getIcon(type: ToastType) {
	if (type === "success") return <ToastCheck fill="#8AE8B6" />;
	if (type === "error") return <ToastFail fill="#FF9875" />;
	if (type === "warning") return <ToastWarn fill="#FFD698" />;
	return null;
}

export const ToastItem = ({ data }: { data: Toast }) => {
	const { borderRadius } = useTheme();

	return (
		<motion.div
			// biome-ignore format:
			className={`bn-rounded-lg bn-bg-layer-2 bn-px-3 bn-py-2.5 bn-flex bn-items-start bn-space-x-2 ${getTextColor(data.type)}`}
			style={{ borderRadius: getBorderRadius(borderRadius, 8) }}
			initial={{ opacity: 0, y: 10 }}
			animate={{ opacity: 1, y: 0 }}
			exit={{ opacity: 0, x: "100%" }}
		>
			<div className="bn-flex-shrink-0 bn-size-6">{getIcon(data.type)}</div>
			<div>
				<p className="bn-text-base bn-font-semibold">{data.title}</p>
				<p className="bn-text-sm bn-font-normal bn-mt-[2.5px] bn-text-secondary">
					{data.message}
				</p>
			</div>
		</motion.div>
	);
};
