'use client';

import { ReactNode } from 'react';
import { usePrivacy } from '@/context/PrivacyContext';

export const PRIVACY_MASK = '••••';

/**
 * Renders its children normally, but shows a mask while privacy mode is on.
 * Use for inline sensitive numbers that can't be hidden without breaking
 * the surrounding row/badge.
 */
export default function SensitiveValue({
  children,
  className,
}: {
  children: ReactNode;
  className?: string;
}) {
  const { privacyMode } = usePrivacy();
  return <span className={className}>{privacyMode ? PRIVACY_MASK : children}</span>;
}