import { ComponentType, FunctionComponent } from 'react';
import { useTranslations } from 'next-intl';
import { Box } from '@mui/material';
import type { ProviderCode } from '@/services/bnpl/types';

export interface BnplProviderLogoProps {
  providerCode: ProviderCode;
  /** Box width in px — height follows at a 10:7 wordmark ratio. Defaults to the D1 provider-row size. */
  size?: number;
}

/**
 * Real bundled provider marks — empty until licensed assets exist (never fake a provider's logo). A real
 * SVG drops in here (`providerCode → ComponentType`) without touching any call-site: `MethodStep` and any
 * future provider list keep rendering `<BnplProviderLogo providerCode={…} />` unchanged.
 */
const PROVIDER_LOGO_SVG: Partial<Record<ProviderCode, ComponentType<{ width: number; height: number }>>> = {};

/**
 * D1 provider mark — a registry component so real logos can drop in without touching call-sites (the
 * decision this phase made: no licensed provider assets exist yet, so every provider falls back to a
 * *designed* neutral chip — a tinted monogram roundel, replacing the old two-letter text-glyph stand-in
 * (`DG`/`SP`/…) that read as unfinished). The provider's full name is rendered by the caller alongside it
 * (unchanged) — this component is only the mark.
 * @component BnplProviderLogo
 */
const BnplProviderLogo: FunctionComponent<BnplProviderLogoProps> = ({ providerCode, size = 40 }) => {
  const t = useTranslations('bnpl');
  const height = Math.round(size * 0.7);
  const LogoSvg = PROVIDER_LOGO_SVG[providerCode];

  if (LogoSvg) return <LogoSvg width={size} height={height} />;

  const name = t(`provider_${providerCode}`);
  const monogram = name.trim().charAt(0).toUpperCase();

  return (
    <Box
      data-provider-logo={providerCode}
      aria-hidden
      style={{ width: size, height }}
      sx={{
        borderRadius: '50%',
        flex: 'none',
        display: 'grid',
        placeItems: 'center',
        fontWeight: 800,
        fontSize: Math.round(height * 0.55),
        color: 'var(--bal-secondary-dark)',
        backgroundColor: 'var(--bal-secondary-soft)',
      }}
    >
      {monogram}
    </Box>
  );
};

export default BnplProviderLogo;
