"use client"; import { memo } from "react"; import { cls, shouldUseInvertedText } from "@/lib/utils"; import { useTheme } from "@/providers/themeProvider/ThemeProvider"; import type { InvertedBackground } from "@/providers/themeProvider/config/constants"; interface BentoMapProps { useInvertedBackground: InvertedBackground; className?: string; } const BentoMap = ({ useInvertedBackground, className = "", }: BentoMapProps) => { const theme = useTheme(); const shouldUseLightText = shouldUseInvertedText(useInvertedBackground, theme.cardStyle); const dots = [ { left: "25%", top: "54%", delay: "0s" }, { left: "68%", top: "21%", delay: "0.5s" }, { left: "48%", top: "52.5%", delay: "1s" }, { left: "67%", top: "42%", delay: "1.5s" }, { left: "55.7%", top: "70.75%", delay: "2s" }, { left: "28.5%", top: "33%", delay: "2.5s" }, { left: "19%", top: "29.25%", delay: "3s" }, { left: "32%", top: "71%", delay: "3.5s" }, ]; return (