"use client";

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

interface ArrayElementProps {
  element: ArrayElementState;
  size?: "sm" | "md" | "lg";
  showIndex?: boolean;
  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",
} as const;

export function ArrayElement({
  element,
  size = "md",
  showIndex = true,
  className,
}: ArrayElementProps) {
  return (
    <div className={cn("flex flex-col items-center gap-1", className)}>
      <motion.div
        layout
        initial={false}
        animate={{
          scale: element.state === "highlighted" ? 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[element.state]
        )}
      >
        {element.value}
      </motion.div>
      {showIndex && (
        <span className="text-xs text-[var(--muted-foreground)]">{element.index}</span>
      )}
    </div>
  );
}