'use client';

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

interface LinkedListNodeProps {
  node: LinkedListNodeState;
  isLast?: boolean;
  className?: string;
}

const STATE_CLASSES = {
  normal: 'bg-surface-variant border-border text-foreground',
  highlighted: 'bg-primary/20 border-primary text-primary',
  dimmed: 'bg-surface-variant/50 border-border/50 text-foreground-muted opacity-40',
  success: 'bg-viz-success/20 border-viz-success text-viz-success',
  comparing: 'bg-viz-compare/20 border-viz-compare text-viz-compare',
} as const;

export function LinkedListNode({
  node,
  isLast = false,
  className,
}: LinkedListNodeProps) {
  if (node.isNull) {
    return (
      <div className={cn('flex items-center', className)}>
        <div className="flex h-10 items-center justify-center px-3 font-mono text-sm text-foreground-muted">
          null
        </div>
      </div>
    );
  }

  return (
    <div className={cn('flex items-center', className)}>
      <motion.div
        layout
        initial={false}
        animate={{
          scale: node.state === 'highlighted' ? 1.05 : 1,
        }}
        transition={{ duration: 0.2 }}
        className={cn(
          'flex h-10 w-10 items-center justify-center rounded-lg border-2 font-mono font-medium transition-colors duration-200',
          STATE_CLASSES[node.state]
        )}
      >
        {node.value}
      </motion.div>
      {!isLast && (
        <motion.div
          initial={{ opacity: 0 }}
          animate={{ opacity: 1 }}
          className="flex items-center"
        >
          <div className="h-0.5 w-4 bg-border" />
          <div className="h-0 w-0 border-y-4 border-l-6 border-y-transparent border-l-border" />
        </motion.div>
      )}
    </div>
  );
}
