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;
  /** If true, will use dark colours for dark on light theme */
  inverse?: boolean;
  /** What type of logo to display */
  type?: `${LogoType}`;
}

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

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>
  );
}
