"use client";

import type { ReactNode } from "react";
import { Focus, Orbit } from "lucide-react";

function ToolbarButton({
  label,
  disabled = false,
  children,
  onClick,
}: {
  label: string;
  disabled?: boolean;
  children: ReactNode;
  onClick?: () => void;
}) {
  return (
    <button
      type="button"
      aria-label={label}
      title={label}
      disabled={disabled}
      onClick={onClick}
      className={[
        "grid size-7 place-items-center rounded-md border border-transparent text-[var(--ui-text-muted)] transition hover:border-[var(--ui-border-strong)] hover:bg-[var(--ui-control-hover)] hover:text-[var(--ui-text-strong)]",
        disabled ? "cursor-not-allowed opacity-40 hover:border-transparent hover:bg-transparent" : "",
      ].join(" ")}
    >
      {children}
    </button>
  );
}

export function EmbeddedCadViewToolbar({
  disabled = false,
  onResetView,
  onScreenshot,
}: {
  disabled?: boolean;
  onResetView: () => void;
  onScreenshot?: () => void;
}) {
  return (
    <div
      data-viewer-interaction-overlay="true"
      className="pointer-events-auto absolute right-3 top-3 z-30 inline-flex min-h-10 items-center gap-1 rounded-md border border-[var(--ui-border)] bg-[var(--ui-glass-popover)] p-1.5 text-[var(--ui-text-muted)] shadow-[var(--ui-shadow-soft)] backdrop-blur"
      role="toolbar"
      aria-label="CAD preview tools"
      onPointerDown={(event) => event.stopPropagation()}
    >
      <ToolbarButton label="Reset view" disabled={disabled} onClick={onResetView}>
        <Orbit className="size-3.5" strokeWidth={2} aria-hidden="true" />
      </ToolbarButton>
      <ToolbarButton label="Copy screenshot" disabled={disabled || !onScreenshot} onClick={onScreenshot}>
        <Focus className="size-3.5" strokeWidth={2} aria-hidden="true" />
      </ToolbarButton>
    </div>
  );
}