Use locale-neutral images and provide cultural overrides when needed

// ✅ Neutral icons that work across locales
// A checkmark badge as status — avoid using standalone checkmarks for "correct"
// An arrow pointing right for "continue" — works in LTR layouts
// A padlock for security — universally understood
// An envelope for messages — culturally neutral
 
// ❌ Avoid as defaults
// 👍 Thumbs up — use a star, heart, or abstract "like" shape instead
// 🫵 Pointing finger — use an arrow or chevron
// 🦉 Owl — use an abstract lightbulb or graduation cap for "knowledge"

// components/LocaleImage.tsx
import React from 'react';
 
interface LocaleImageProps {
  /** The logical name of the image asset (e.g. "approval-icon") */
  assetKey: string;
  alt: string;
  width?: number;
  height?: number;
  className?: string;
}
 
/**
 * Map of assetKey → locale → image path.
 * Only locales that differ from the default need an entry.
 * All other locales fall through to the `default` key.
 */
const localeImageMap: Record<string, Record<string, string>> = {
  'approval-icon': {
    default:  '/images/icons/approval-star.svg',
    'ar':     '/images/icons/approval-check-circle.svg',
    'ar-SA':  '/images/icons/approval-check-circle.svg',
    'ja':     '/images/icons/approval-circle.svg',
    'ko':     '/images/icons/approval-circle.svg',
  },
  'success-badge': {
    default:  '/images/icons/success-check.svg',
    'ja':     '/images/icons/success-circle.svg',
    'zh-TW':  '/images/icons/success-circle.svg',
  },
  'welcome-illustration': {
    default:  '/images/illustrations/welcome-neutral.png',
    'sa':     '/images/illustrations/welcome-sa.png',
    'in':     '/images/illustrations/welcome-in.png',
  },
};
 
/**
 * Resolves the image path for a given locale using the following priority:
 * 1. Exact locale match     (e.g. "ar-SA")
 * 2. Language-only match    (e.g. "ar")
 * 3. Default fallback
 */
function resolveImagePath(assetKey: string, locale: string): string {
  const variants = localeImageMap[assetKey];
  if (!variants) {
    console.warn(`LocaleImage: unknown assetKey "${assetKey}"`);
    return `/images/icons/${assetKey}.svg`; // best-effort fallback
  }
 
  // Try exact locale match first
  if (variants[locale]) return variants[locale];
 
  // Try language tag only (e.g. "ar" from "ar-SA")
  const lang = locale.split('-')[0];
  if (variants[lang]) return variants[lang];
 
  return variants.default;
}
 
export function LocaleImage({
  assetKey,
  alt,
  width,
  height,
  className,
}: LocaleImageProps) {
  // Replace with your app's locale hook or context
  const locale =
    typeof document !== 'undefined'
      ? document.documentElement.lang || 'en'
      : 'en';
 
  const src = resolveImagePath(assetKey, locale);
 
  return (
    <img
      src={src}
      alt={alt}
      width={width}
      height={height}
      className={className}
    />
  );
}

// ✅ Cultural override is invisible to the consumer
<LocaleImage
  assetKey="approval-icon"
  alt={t('approval.iconAlt')}  // alt text also comes from translations
  width={24}
  height={24}
/>

❌ A promotional banner image with the text "Get 50% off today!" embedded
❌ A feature screenshot with English UI labels that are part of the image
❌ An infographic where all data labels are rasterised into the PNG
 
✅ An SVG with text in <text> elements — can be translated via i18n attribute injection
✅ An HTML/CSS overlay on top of an image — text is in the DOM and translatable
✅ A pure illustration with no words — works for every locale without modification

// ✅ SVG with translatable text via props
interface BadgeSvgProps {
  label: string; // translated by the caller
}
 
function BadgeSvg({ label }: BadgeSvgProps) {
  return (
    <svg viewBox="0 0 100 40" xmlns="http://www.w3.org/2000/svg">
      <rect width="100" height="40" rx="8" fill="#3b82f6" />
      {/* Text is a prop — not hardcoded — so it can be translated */}
      <text
        x="50"
        y="25"
        textAnchor="middle"
        fill="white"
        fontSize="14"
        fontFamily="system-ui, sans-serif"
      >
        {label}
      </text>
    </svg>
  );
}
 
// Caller controls the translated string
<BadgeSvg label={t('badge.newLabel')} />

// app/[lang]/feature/page.tsx
import { LocaleImage } from '@/components/LocaleImage';
 
export default function FeaturePage({
  params,
}: {
  params: { lang: string };
}) {
  return (
    <section>
      <LocaleImage
        assetKey="welcome-illustration"
        alt="Welcome illustration"
        locale={params.lang}
      />
    </section>
  );
}