'use client';

/**
 * ImageInfo - Displays image dimensions badge
 */

import { useEffect, useState } from 'react';
import { useImageCache } from '../../../stores/mediaCache';
import type { ImageInfoProps } from '../types';

// =============================================================================
// COMPONENT
// =============================================================================

export function ImageInfo({ src }: ImageInfoProps) {
  const { getDimensions, cacheDimensions } = useImageCache();
  const [dimensions, setDimensions] = useState<{ w: number; h: number } | null>(null);

  useEffect(() => {
    // Check cache first
    const cached = getDimensions(src);
    if (cached) {
      setDimensions({ w: cached.width, h: cached.height });
      return;
    }

    // Load and cache dimensions
    const img = new Image();
    img.onload = () => {
      const dims = { w: img.naturalWidth, h: img.naturalHeight };
      setDimensions(dims);
      cacheDimensions(src, { width: dims.w, height: dims.h });
    };
    img.src = src;
  }, [src, getDimensions, cacheDimensions]);

  if (!dimensions) return null;

  return (
    <div className="absolute top-3 right-3 z-10 px-2 py-1 bg-background/80 backdrop-blur-sm border rounded text-[10px] text-muted-foreground font-mono">
      {dimensions.w} × {dimensions.h}
    </div>
  );
}
