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

"use client";
import { getCookie, setCookie } from "cookies-next/client";
import { add } from "date-fns";
import { ArrowRight, CheckCircle } from "lucide-react";
import { useEffect, useState } from "react";
import { Button } from "~/components/ui/button";
import { useTranslation } from "~/providers/I18nProvider";
import {
	AlertDialog,
	AlertDialogContent,
	AlertDialogDescription,
	AlertDialogFooter,
	AlertDialogHeader,
	AlertDialogTitle,
} from "./ui/alert-dialog";

const COOKIE_KEY = "onboard_tutorial_shown";

export const OnboardTutorial = () => {
	const { t } = useTranslation();
	const hasCookie = getCookie(COOKIE_KEY) === "true";

	const handleClose = () => {
		setCookie(COOKIE_KEY, "true", {
			expires: add(new Date(), { days: 30 }),
		});
		setOpen(false);
	};

	const [open, setOpen] = useState(false);

	useEffect(() => {
		if (!hasCookie) {
			const timer = setTimeout(() => {
				setOpen(true);
			}, 1000); // 1 second delay
			return () => clearTimeout(timer);
		}
	}, [hasCookie]);

	return (
		<AlertDialog open={open}>
			<AlertDialogContent className="max-w-2xl">
				<AlertDialogHeader>
					<AlertDialogTitle className="flex items-center gap-2 font-semibold text-2xl">
						<CheckCircle className="size-7 text-green-500" />
						{t.onboarding_tutorial.title}
					</AlertDialogTitle>
					<AlertDialogDescription className="sr-only">
						descrizione
					</AlertDialogDescription>
					<div className="space-y-4 pt-4 text-base text-foreground">
						<p className="font-medium text-foreground text-lg">
							{t.onboarding_tutorial.sub_title}
						</p>

						<div className="space-y-3">
							<div className="flex gap-3">
								<div className="flex size-8 shrink-0 items-center justify-center rounded-full bg-blue-100 text-blue-600">
									<span className="font-semibold">1</span>
								</div>
								<div className="flex flex-col gap-1">
									<p className="font-semibold text-foreground">
										{t.onboarding_tutorial.step1_title}
									</p>
									<p className="text-muted-foreground text-sm">
										{t.onboarding_tutorial.step1_desc}
									</p>
								</div>
							</div>

							<div className="flex gap-3">
								<div className="flex size-8 shrink-0 items-center justify-center rounded-full bg-blue-100 text-blue-600">
									<span className="font-semibold">2</span>
								</div>
								<div className="flex flex-col gap-1">
									<p className="font-semibold text-foreground">
										{t.onboarding_tutorial.step2_title}
									</p>
									<p className="text-muted-foreground text-sm">
										{t.onboarding_tutorial.step2_desc}
									</p>
								</div>
							</div>

							<div className="flex gap-3">
								<div className="flex size-8 shrink-0 items-center justify-center rounded-full bg-blue-100 text-blue-600">
									<span className="font-semibold">3</span>
								</div>
								<div className="flex flex-col gap-1">
									<p className="font-semibold text-foreground">
										{t.onboarding_tutorial.step3_title}
									</p>
									<p className="text-muted-foreground text-sm">
										{t.onboarding_tutorial.step3_desc}
									</p>
								</div>
							</div>
						</div>

						<div className="mt-4 rounded-lg border border-blue-200 bg-blue-50 p-3">
							<p className="text-blue-900 text-sm">
								💡 <strong>{t.onboarding_tutorial.tip_title}</strong>{" "}
								{t.onboarding_tutorial.tip}
							</p>
						</div>
					</div>
				</AlertDialogHeader>
				<AlertDialogFooter>
					<Button onClick={handleClose} size="lg" variant="success">
						<span>{t.onboarding_tutorial.button_text}</span>
						<ArrowRight className="size-5" />
					</Button>
				</AlertDialogFooter>
			</AlertDialogContent>
		</AlertDialog>
	);
};