infoalloggi-monorepo/apps/infoalloggi/src/components/banners.tsx

import Cookies from "js-cookie";
import { X } from "lucide-react";
import Link from "next/link";
import { type MouseEvent, useEffect, useState } from "react";
import { IconMatrix, type IconType } from "~/components/IconComponents";
import { cn } from "~/lib/utils";
import type { Banners } from "~/schemas/public/Banners";

const defaultHideDuration = 365; // days
export const BannerFactory = (bannerData: Banners) => {
	const NEW_BANNER_KEY = `bannercookie_${bannerData.idbanner}`;

	let bgColor = "";
	let accentColor = "";
	let closeHoverColor = "";

	switch (bannerData.color) {
		case "blu":
			bgColor = "bg-blue-600";
			accentColor = "bg-blue-800";
			closeHoverColor = "hover:bg-blue-500";
			break;
		case "rosso":
			bgColor = "bg-red-600";
			accentColor = "bg-red-800";
			closeHoverColor = "hover:bg-red-500";
			break;
		case "verde":
			bgColor = "bg-green-600";
			accentColor = "bg-green-800";
			closeHoverColor = "hover:bg-green-500";
			break;
		case "indaco":
			bgColor = "bg-indigo-600";
			accentColor = "bg-indigo-800";
			closeHoverColor = "hover:bg-indigo-500";
			break;
		default:
			bgColor = "bg-indigo-600";
			accentColor = "bg-indigo-800";
			closeHoverColor = "hover:bg-indigo-500";
			break;
	}

	const NewBanner = () => {
		const [isBannerToShow, setIsBannerToShow] = useState(false);

		useEffect(() => {
			if (bannerData.is_unskippable === false) {
				const cookievalue = Cookies.get(NEW_BANNER_KEY) !== "true";
				setIsBannerToShow(cookievalue);
			}
		}, []);

		const onClick = (e: MouseEvent<HTMLButtonElement>) => {
			e.preventDefault();

			Cookies.set(NEW_BANNER_KEY, "true", {
				expires: bannerData.hide_duration || defaultHideDuration,
			});
			setIsBannerToShow(false);
		};

		if (!isBannerToShow && bannerData.is_unskippable === false) {
			return null;
		}
		return (
			<div className={cn("bg-indigo-600", bgColor)}>
				<div className="mx-auto flex max-w-screen-xl items-start justify-between px-4 py-3 text-white sm:items-center md:px-8">
					<div className="flex flex-1 items-start justify-center gap-x-4 sm:items-center">
						<div
							className={cn(
								"flex flex-none items-center justify-center rounded-full bg-indigo-800 p-1.5 px-4 font-medium text-sm",
								accentColor,
							)}
						>
							{bannerData.titolo}{" "}
						</div>
						<p className="flex gap-2 p-2 font-medium">
							<span> {bannerData.testo}</span>

							{bannerData.has_cta &&
								bannerData.cta_href &&
								bannerData.cta_icon && (
									<Link
										className="inline-flex items-center gap-x-1 font-semibold underline duration-150 hover:text-indigo-100"
										href={bannerData.cta_href}
									>
										{bannerData.cta_text}
										<IconMatrix
											className="size-4"
											type={bannerData.cta_icon as IconType}
										/>
									</Link>
								)}
						</p>
					</div>
					{bannerData.is_unskippable === false && (
						<button
							className={cn(
								"rounded-lg p-2 ring-offset-2 duration-150 hover:bg-indigo-500 focus:ring",
								closeHoverColor,
							)}
							onClick={onClick}
							type="button"
						>
							<X className="size-5" />
						</button>
					)}
				</div>
			</div>
		);
	};
	return <NewBanner />;
};