"use client";
import { cn } from "@/lib/utils";
import { useEffect, useState } from "react";
type Item = {
id: string;
text: string;
emoji: string;
soundCategory: string;
soundUrl?: string | null;
imageUrl?: string | null;
gridIndex: number;
};
type Props = {
item: Item | null;
index: number;
marked: boolean;
markCount: number;
markedBy: string[];
gridSize: number;
onMark: (itemId: string) => void;
onUnmark?: (itemId: string) => void;
disabled?: boolean;
isFreeSpace?: boolean;
};
function getSoundEmoji(cat: string) {
switch (cat) {
case "horn": return "🎺";
case "alarm": return "🚨";
case "flood": return "🌊";
case "explosion": return "💥";
case "monster": return "👹";
case "death": return "💀";
case "chaos": return "🔥";
default: return "🔔";
}
}
export function BingoCell({ item, index, marked, markCount, markedBy, gridSize, onMark, onUnmark, disabled, isFreeSpace }: Props) {
const [shake, setShake] = useState(false);
const [glow, setGlow] = useState(false);
useEffect(() => {
if (marked) {
setShake(true);
setGlow(true);
const t1 = setTimeout(() => setShake(false), 300);
const t2 = setTimeout(() => setGlow(false), 2000);
return () => { clearTimeout(t1); clearTimeout(t2); };
}
}, [marked]);
if (!item) {
return (
5 ? "text-[10px] p-1" : "text-sm p-2"
)}>
✖
);
}
const isFree = isFreeSpace || item.text.startsWith("FREE SPACE");
return (
);
}