"use client"; import Link from "next/link"; import { useCallback, useEffect, useState } from "react"; import { Dice5, ExternalLink, PackageOpen, X } from "lucide-react"; import { useLocale, useTranslations } from "next-intl"; import { withLocale } from "@/lib/locale-routing"; import { safeGetItem, safeSetItem } from "@/lib/utils"; import { PetSprite } from "@/components/pet-sprite"; import { hasLocale, type Locale } from "@/i18n/config"; type SurprisePet = { slug: string; displayName: string; description: string; spritesheetPath: string; href: string; installHref: string; }; const BASE_KEY = "petdex_surprise_pet_seen"; const THUMBNAIL_SPRITE_SCALE = 0.45; export function SurprisePetCard() { const locale = useLocale(); const currentLocale: Locale = hasLocale(locale) ? locale : "en"; const t = useTranslations("home.surprise"); const [pet, setPet] = useState(null); const [visible, setVisible] = useState(false); const [loading, setLoading] = useState(false); const loadPet = useCallback(async () => { setLoading(true); try { const response = await fetch("/api/pets/random", { headers: { Accept: "application/json" }, cache: "no-store", }); if (!response.ok) return; const next = (await response.json()) as SurprisePet; setPet(next); setVisible(true); } finally { setLoading(false); } }, []); useEffect(() => { const today = new Date().toISOString().slice(0, 10); const key = `${BASE_KEY}_${today}`; if (safeGetItem(key) === "1") return; const timeout = window.setTimeout(() => { safeSetItem(key, "1"); void loadPet(); }, 2200); return () => window.clearTimeout(timeout); }, [loadPet]); if (!visible || pet === null) return null; const petHref = withLocale(pet.href, currentLocale); const installHref = withLocale(pet.installHref, currentLocale); return ( ); }