/**
 * GTImageCrop — Renders a cropped region of an image based on a bounding box.
 *
 * Used in the Ground Truth labeling UI to show row and column crops
 * of the current entry being reviewed.
 */

import type { BBox } from './ground-truth-types'

interface GTImageCropProps {
  imageUrl: string
  bbox: BBox
  naturalWidth: number
  naturalHeight: number
  maxWidth?: number
  label?: string
}

export function GTImageCrop({ imageUrl, bbox, naturalWidth, naturalHeight, maxWidth = 380, label }: GTImageCropProps) {
  if (!bbox || bbox.w === 0 || bbox.h === 0) return null

  const cropWPx = (bbox.w / 100) * naturalWidth
  const cropHPx = (bbox.h / 100) * naturalHeight
  if (cropWPx < 1 || cropHPx < 1) return null

  const scale = maxWidth / cropWPx
  const displayH = cropHPx * scale

  return (
    <div>
      {label && <div className="text-xs font-medium text-slate-500 mb-1">{label}</div>}
      <div
        className="rounded-lg border border-slate-200 overflow-hidden bg-white"
        style={{ width: maxWidth, height: Math.min(displayH, 120), overflow: 'hidden', position: 'relative' }}
      >
        <img
          src={imageUrl}
          alt=""
          draggable={false}
          style={{
            position: 'absolute',
            width: naturalWidth * scale,
            height: naturalHeight * scale,
            left: -(bbox.x / 100) * naturalWidth * scale,
            top: -(bbox.y / 100) * naturalHeight * scale,
            maxWidth: 'none',
          }}
        />
      </div>
    </div>
  )
}