Collaborative-pixel-art/frontend/src/components/ui/CoordinateDisplay.tsx

'use client';

import { motion } from 'framer-motion';

interface CoordinateDisplayProps {
  x: number;
  y: number;
  pixelColor?: string | null;
  pixelOwner?: string | null;
  zoom: number;
}

export function CoordinateDisplay({ 
  x, 
  y, 
  pixelColor, 
  pixelOwner, 
  zoom 
}: CoordinateDisplayProps) {
  return (
    <motion.div
      className="fixed bottom-4 left-4 sm:bottom-6 sm:left-6 z-50 max-w-[calc(100vw-120px)] sm:max-w-none"
      initial={{ opacity: 0, y: 30 }}
      animate={{ opacity: 1, y: 0 }}
      exit={{ opacity: 0, y: 30 }}
      transition={{ 
        type: "spring", 
        stiffness: 400, 
        damping: 25
      }}
    >
      <motion.div 
        className="bg-white/5 backdrop-blur-2xl rounded-xl sm:rounded-2xl px-3 sm:px-4 py-2 sm:py-3 border border-white/20 shadow-lg ring-1 ring-white/10"
        whileHover={{ 
          scale: 1.02
        }}
        transition={{ type: "spring", stiffness: 400, damping: 25 }}
      >
        <div className="space-y-1 sm:space-y-2 text-xs sm:text-sm">
          {/* Coordinates */}
          <div className="flex items-center gap-2">
            <span className="text-white/70 font-medium">Pos:</span>
            <span className="text-white font-mono font-bold">
              ({x}, {y})
            </span>
          </div>

          {/* Pixel info */}
          {pixelColor && (
            <>
              <div className="flex items-center gap-2">
                <span className="text-white/70 font-medium">Pixel:</span>
                <div 
                  className="w-3 h-3 sm:w-4 sm:h-4 rounded border border-white/30"
                  style={{ backgroundColor: pixelColor }}
                />
                <span className="text-white font-mono text-xs">
                  {pixelColor.toUpperCase()}
                </span>
              </div>
              
              {pixelOwner && (
                <div className="flex items-center gap-2">
                  <span className="text-white/70 font-medium">By:</span>
                  <span className="text-blue-300 font-medium text-xs max-w-[80px] sm:max-w-none truncate">
                    {pixelOwner}
                  </span>
                </div>
              )}
            </>
          )}
        </div>
      </motion.div>
    </motion.div>
  );
}