"use client";

interface BilingualValueProps {
  /** Romanized (English) value */
  romaji: string;
  /** Japanese value (optional) */
  japanese?: string;
  /** Placeholder text when not verified */
  placeholder: string;
  /** Whether the address has been verified */
  verified: boolean;
}

/**
 * Displays a bilingual value with both romaji and Japanese text.
 * Shows placeholder when not verified.
 */
export function BilingualValue({ romaji, japanese, placeholder, verified }: BilingualValueProps) {
  if (!verified) {
    return <span className="text-muted-foreground/60 italic text-sm">{placeholder}</span>;
  }

  return (
    <div className="flex items-baseline gap-2">
      <span className="text-foreground font-medium">{romaji}</span>
      {japanese && <span className="text-muted-foreground text-sm">({japanese})</span>}
    </div>
  );
}
