'use client';

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

interface LinkedListPointerProps {
  pointer: LinkedListPointerState;
  nodeWidth: number;
  arrowWidth: number;
  /** Horizontal offset when multiple pointers at same position */
  horizontalOffset?: number;
}

const COLOR_CLASSES = {
  slow: 'text-viz-pointer-left',
  fast: 'text-viz-pointer-right',
  prev: 'text-viz-pointer-mid',
  curr: 'text-viz-pointer-left',
  next: 'text-viz-pointer-right',
  default: 'text-viz-pointer-default',
} as const;

export function LinkedListPointer({
  pointer,
  nodeWidth,
  arrowWidth,
  horizontalOffset = 0,
}: LinkedListPointerProps) {
  // Calculate x position based on node index, with offset for overlapping pointers
  const x = pointer.nodeIndex * (nodeWidth + arrowWidth) + nodeWidth / 2 + horizontalOffset;

  return (
    <motion.div
      initial={false}
      animate={{ x: x - 12 }}
      transition={{
        type: 'spring',
        stiffness: 300,
        damping: 30,
      }}
      className={cn(
        'absolute top-0 flex flex-col items-center',
        COLOR_CLASSES[pointer.color]
      )}
    >
      <span className="text-xs font-medium">{pointer.name}</span>
      <svg
        width="16"
        height="12"
        viewBox="0 0 16 12"
        fill="currentColor"
        className="mt-0.5"
      >
        <path d="M8 12L0 0h16L8 12z" />
      </svg>
    </motion.div>
  );
}
