'use client';

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

interface StackElementProps {
  element: StackElementState;
  isTop?: boolean;
  className?: string;
}

const STATE_CLASSES = {
  normal: 'bg-[var(--surface-variant)] border-[var(--border)] text-[var(--foreground)]',
  highlighted: 'bg-[var(--primary)]/20 border-[var(--primary)] text-[var(--primary)]',
  popped: 'bg-[var(--error)]/20 border-[var(--error)] text-[var(--error)]',
  pushing: 'bg-[var(--success)]/20 border-[var(--success)] text-[var(--success)]',
} as const;

export function StackElement({
  element,
  isTop = false,
  className,
}: StackElementProps) {
  return (
    <motion.div
      layout
      initial={{ opacity: 0, y: -20, scale: 0.8 }}
      animate={{
        opacity: element.state === 'popped' ? 0 : 1,
        y: 0,
        scale: element.state === 'highlighted' ? 1.05 : 1,
      }}
      exit={{ opacity: 0, y: -20, scale: 0.8 }}
      transition={{
        type: 'spring',
        stiffness: 300,
        damping: 30,
      }}
      className={cn(
        'relative flex h-10 w-10 items-center justify-center rounded-lg border-2 font-mono font-medium transition-colors duration-200',
        STATE_CLASSES[element.state],
        className
      )}
    >
      {element.value}
      {isTop && (
        <span className="absolute -right-8 text-[10px] font-medium text-[var(--muted-foreground)]">
          TOP
        </span>
      )}
    </motion.div>
  );
}
