"use client";

import type { CanvasViewport } from "@/domain/design";
import type { CanvasAnnotation } from "@/ui/components/PromptComposer";

export function CanvasAnnotations({
  annotations,
  viewport
}: {
  annotations: CanvasAnnotation[];
  viewport: CanvasViewport;
}) {
  if (annotations.length === 0) return null;

  return (
    <div className="canvas-annotation-layer" aria-hidden="true">
      {annotations.map((annotation) => (
        <span
          key={annotation.id}
          className="canvas-annotation-marker"
          style={{
            left: viewport.x + annotation.x * viewport.k,
            top: viewport.y + annotation.y * viewport.k
          }}
        >
          <b>{annotation.index}</b>
        </span>
      ))}
    </div>
  );
}