"use client";

import type { FrameRegion } from "@/lib/handles";

/**
 * Flags a handle frame on the picture: an amber frame round the player and a
 * "HANDLE · NOT IN EDIT" tag. Shown only while the playhead is in a handle so
 * a reviewer can't mistake a glitch there for a problem in the cut.
 *
 * Purely a viewing aid over the player — it never reaches the media, passes
 * every pointer event through, and sits outside the zoom layer so it stays
 * readable at any zoom.
 */
export function HandleOverlay({ region }: { region: FrameRegion }) {
  if (region !== "head" && region !== "tail") return null;
  return (
    <div
      className="pointer-events-none absolute inset-0 ring-4 ring-inset ring-amber-400/80"
      data-testid="handle-overlay"
    >
      <div className="absolute left-1/2 top-3 -translate-x-1/2 whitespace-nowrap rounded bg-amber-400 px-2.5 py-1 font-mono text-[11px] font-bold tracking-wide text-black shadow">
        {region === "head" ? "HEAD" : "TAIL"} HANDLE · NOT IN EDIT
      </div>
    </div>
  );
}