"use client";
import * as React from 'react';
import { clsx } from 'clsx';
import { twMerge } from 'tailwind-merge';
import { jsxs, jsx } from 'react/jsx-runtime';

function cn(...inputs) {
  return twMerge(clsx(inputs));
}
function ImageOcclusion({
  src,
  alt,
  regions,
  onRegionReveal,
  className,
  ...rest
}) {
  const [revealed, setRevealed] = React.useState(() => /* @__PURE__ */ new Set());
  const onRevealRef = React.useRef(onRegionReveal);
  onRevealRef.current = onRegionReveal;
  const warnedRef = React.useRef(false);
  const nodeEnv = globalThis.process?.env?.NODE_ENV;
  if (nodeEnv !== "production" && !warnedRef.current) {
    const offender = regions.find(
      (r) => r.x < 0 || r.y < 0 || r.x + r.width > 1.0001 || r.y + r.height > 1.0001
    );
    if (offender) {
      warnedRef.current = true;
      console.warn(
        `[hex-core/ImageOcclusion] Region "${offender.id}" coords escape [0, 1]. Pass fractions, not pixels \u2014 e.g. x: 0.42 (not 168).`
      );
    }
  }
  const toggle = React.useCallback((id) => {
    setRevealed((prev) => {
      const next = new Set(prev);
      if (next.has(id)) {
        next.delete(id);
      } else {
        next.add(id);
        onRevealRef.current?.(id);
      }
      return next;
    });
  }, []);
  return /* @__PURE__ */ jsxs(
    "div",
    {
      ...rest,
      "data-hex-image-occlusion": true,
      className: cn("relative inline-block", className),
      children: [
        /* @__PURE__ */ jsx(
          "img",
          {
            src,
            alt,
            "data-hex-image-occlusion-img": true,
            className: "block h-auto w-full select-none",
            draggable: false
          }
        ),
        /* @__PURE__ */ jsx(
          "div",
          {
            "data-hex-image-occlusion-overlay": true,
            className: "pointer-events-none absolute inset-0",
            children: regions.map((r, i) => {
              const isRevealed = revealed.has(r.id);
              return /* @__PURE__ */ jsx(
                "button",
                {
                  type: "button",
                  "data-hex-image-occlusion-region": true,
                  "data-region-id": r.id,
                  "data-revealed": isRevealed,
                  "aria-pressed": isRevealed,
                  "aria-label": r.label ? isRevealed ? `Region ${i + 1} revealed: ${r.label}. Activate to hide.` : `Region ${i + 1} of ${regions.length}, hidden. Activate to reveal: ${r.label}.` : isRevealed ? `Region ${i + 1} revealed. Activate to hide.` : `Region ${i + 1} of ${regions.length}, hidden. Activate to reveal.`,
                  onClick: () => toggle(r.id),
                  className: cn(
                    "pointer-events-auto absolute rounded-sm border-2 border-primary/60 transition-opacity active:scale-[0.98] focus:outline-none focus-visible:ring-2 focus-visible:ring-ring",
                    isRevealed ? "bg-transparent opacity-30 hover:opacity-60" : "bg-primary opacity-95 hover:bg-primary/90"
                  ),
                  style: {
                    left: `${r.x * 100}%`,
                    top: `${r.y * 100}%`,
                    width: `${r.width * 100}%`,
                    height: `${r.height * 100}%`,
                    // Explicit z-index = array index makes stacking deterministic:
                    // later array entries always render (and click-catch) on top.
                    zIndex: i
                  }
                },
                r.id
              );
            })
          }
        )
      ]
    }
  );
}

export { ImageOcclusion };
//# sourceMappingURL=image-occlusion.js.map
//# sourceMappingURL=image-occlusion.js.map