import { clsx } from 'clsx';

import {
  LogoWise,
  LogoWiseInverse,
  LogoWisePlatform,
  LogoWisePlatformInverse,
  LogoFlag,
  LogoFlagInverse,
  LogoFlagPlatform,
  LogoFlagPlatformInverse,
} from './logo-assets';

const svgPaths = {
  WISE: LogoWise,
  WISE_BUSINESS: LogoWise,
  WISE_INVERSE: LogoWiseInverse,
  WISE_BUSINESS_INVERSE: LogoWiseInverse,
  WISE_PLATFORM: LogoWisePlatform,
  WISE_PLATFORM_INVERSE: LogoWisePlatformInverse,
  WISE_FLAG: LogoFlag,
  WISE_FLAG_INVERSE: LogoFlagInverse,
  WISE_FLAG_PLATFORM: LogoFlagPlatform,
  WISE_FLAG_PLATFORM_INVERSE: LogoFlagPlatformInverse,
};

export enum LogoType {
  WISE = 'WISE',
  WISE_BUSINESS = 'WISE_BUSINESS',
  WISE_PLATFORM = 'WISE_PLATFORM',
}

export interface LogoProps {
  /** Extra classes applied to Logo */
  className?: string;
  /**
   * Renders a light-coloured version suited for dark backgrounds.
   * @default false
   */
  inverse?: boolean;
  /**
   * What type of logo to display
   * @default 'WISE'
   */
  type?: `${LogoType}`;
}

const labelByType = {
  WISE: 'Wise',
  WISE_BUSINESS: 'Wise Business',
  WISE_PLATFORM: 'Wise Platform',
} satisfies Record<`${LogoType}`, string>;

/**
 * Renders the Wise wordmark logo. Responsive — shows the flag-only mark on small viewports
 * and the full wordmark on ≥576px (small breakpoint and above).
 *
 * @see {@link https://wise.design/foundations/logo Design Spec}
 */
export default function Logo({ className, inverse, type = 'WISE' }: LogoProps) {
  const LogoSm =
    svgPaths[`WISE_FLAG${type === 'WISE_PLATFORM' ? '_PLATFORM' : ''}${inverse ? '_INVERSE' : ''}`];
  const LogoMd = svgPaths[`${type}${inverse ? '_INVERSE' : ''}`];

  return (
    <span aria-label={labelByType[type]} role="img" className={clsx(className, 'np-logo')}>
      <LogoSm className="np-logo-svg np-logo-svg--size-sm" />
      <LogoMd className="np-logo-svg np-logo-svg--size-md" />
    </span>
  );
}