Redacted

"use client";

import * as React from "react";
import { cn } from "@/lib/ledger/cn";
import { EyeIcon, EyeSlashIcon } from "@/components/ledger/icons";

export interface RedactedProps extends React.ComponentPropsWithoutRef<"span"> {
  children: React.ReactNode;
  defaultRevealed?: boolean;
  label?: string;
  /** Blur the real value instead of masking it. Layout-identical either way. */
  mode?: "mask" | "blur";
}

/**
 * Redaction is a presentation state, not missing data.
 *
 * The masked form reserves the revealed width so nothing reflows, and the
 * blur variant keeps `user-select: none` so the value can't be copied out
 * of a "hidden" state.
 */
export const Redacted = React.forwardRef<HTMLSpanElement, RedactedProps>(
  ({ className, children, mode = "blur", label = "Balance", defaultRevealed = false, ...props }, ref) => {
    const [revealed, setRevealed] = React.useState(defaultRevealed);

    return (
      <span className={cn("inline-flex items-center gap-2", className)} ref={ref} {...props}>
        <span
          aria-hidden={!revealed}
          className={cn(
            "transition-[filter,opacity] duration-2 ease-out",
            !revealed && mode === "blur" && "select-none blur-[6px]",
            !revealed && mode === "mask" && "invisible",
          )}
        >
          {children}
        </span>
        {!revealed && mode === "mask" ? (
          <span aria-hidden="true" className="absolute text-text-tertiary">
            ••••
          </span>
        ) : null}
        <button
          aria-label={revealed ? `${label} shown, activate to hide` : `${label} hidden, activate to reveal`}
          aria-pressed={revealed}
          className={cn(
            "grid size-8 shrink-0 place-items-center rounded-sm text-text-tertiary",
            "transition-colors duration-1 ease-standard",
            "@media(hover:hover)and(pointer:fine){hover:bg-surface-hover}",
            "hover:bg-surface-hover hover:text-text-secondary",
          )}
          onClick={() => setRevealed((v) => !v)}
          type="button"
        >
          {revealed ? (
            <EyeSlashIcon aria-hidden="true" className="size-4" />
          ) : (
            <EyeIcon aria-hidden="true" className="size-4" />
          )}
        </button>
      </span>
    );
  },
);
Redacted.displayName = "Redacted";