import type {
  CanvasMarqueeState,
  CanvasViewport,
} from '@genarrative/image-canvas-core';

export function SelectionOverlay({
  className = '',
  marquee,
  viewport,
}: {
  className?: string;
  marquee: CanvasMarqueeState | null;
  viewport: CanvasViewport;
}) {
  if (!marquee) return null;
  return (
    <div
      className={`genarrative-image-canvas__selection-overlay ${className}`.trim()}
      aria-hidden="true"
      style={{
        left:
          (Math.min(marquee.startX, marquee.currentX) - viewport.x) /
          viewport.scale,
        top:
          (Math.min(marquee.startY, marquee.currentY) - viewport.y) /
          viewport.scale,
        width: Math.abs(marquee.currentX - marquee.startX) / viewport.scale,
        height: Math.abs(marquee.currentY - marquee.startY) / viewport.scale,
      }}
    />
  );
}