'use client';

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

interface QueueElementProps {
  element: QueueElementState;
  isFront?: boolean;
  isRear?: 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)]',
  enqueued: 'bg-[var(--success)]/20 border-[var(--success)] text-[var(--success)]',
  dequeued: 'bg-[var(--error)]/20 border-[var(--error)] text-[var(--error)]',
} as const;

export function QueueElement({
  element,
  isFront = false,
  isRear = false,
  className,
}: QueueElementProps) {
  return (
    <motion.div
      layout
      initial={{ opacity: 0, x: 20, scale: 0.8 }}
      animate={{
        opacity: element.state === 'dequeued' ? 0 : 1,
        x: 0,
        scale: element.state === 'highlighted' ? 1.05 : 1,
      }}
      exit={{ opacity: 0, x: -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}
      {isFront && (
        <span className="absolute -bottom-5 text-[10px] font-medium text-[var(--muted-foreground)]">
          FRONT
        </span>
      )}
      {isRear && (
        <span className="absolute -bottom-5 text-[10px] font-medium text-[var(--muted-foreground)]">
          REAR
        </span>
      )}
    </motion.div>
  );
}
