"use client";

import { motion } from "framer-motion";
import { cn } from "@/lib/utils";
import type { GridCellState } from "@/lib/visualizations/types";

interface GridCellProps {
  cell: GridCellState;
  size?: "sm" | "md" | "lg";
  className?: string;
}

const SIZE_CLASSES = {
  sm: "w-10 h-10 text-sm",
  md: "w-14 h-14 text-base",
  lg: "w-18 h-18 text-lg",
} as const;

const STATE_CLASSES = {
  normal: "bg-[var(--muted)] border-[var(--border)] text-[var(--foreground)]",
  highlighted: "bg-[var(--primary)]/20 border-[var(--primary)] text-[var(--primary)]",
  dimmed: "bg-[var(--muted)]/50 border-[var(--border)]/50 text-[var(--muted-foreground)] opacity-30",
  success: "bg-green-500/20 border-green-500 text-green-500",
  comparing: "bg-amber-500/20 border-amber-500 text-amber-500",
  computing: "bg-blue-500/20 border-blue-500 text-blue-500",
} as const;

export function GridCell({
  cell,
  size = "md",
  className,
}: GridCellProps) {
  const isComputing = cell.state === "computing";

  return (
    <motion.div
      layout
      initial={false}
      animate={{
        scale: cell.state === "highlighted" || cell.state === "computing" ? 1.05 : 1,
      }}
      transition={{ duration: 0.2 }}
      className={cn(
        "flex items-center justify-center rounded-lg border-2 font-mono font-medium transition-colors duration-200",
        SIZE_CLASSES[size],
        STATE_CLASSES[cell.state],
        isComputing && "animate-pulse",
        className
      )}
    >
      {cell.value === Infinity ? "∞" : cell.value}
    </motion.div>
  );
}
