"use client";

import { useReviewStore } from "@/hooks/use-review-player";
import { isHandleFrame } from "@/lib/handles";
import { cn } from "@/lib/utils";

/**
 * "HANDLE" tag for a note left on a handle frame, so whoever picks it up can
 * see at a glance that it's about a frame outside the edit.
 */
export function HandleBadge({ frame, className }: { frame: number; className?: string }) {
  const editRange = useReviewStore((s) => s.editRange);
  if (!isHandleFrame(editRange, frame)) return null;
  return (
    <span
      className={cn(
        "rounded border border-amber-400/40 bg-amber-400/10 px-1 py-px font-mono text-[9px] font-bold tracking-wide text-amber-400",
        className
      )}
      title="This frame is a handle — outside the edit"
    >
      HANDLE
    </span>
  );
}