import StatusIcon, { StatusIconProps } from '../statusIcon';
import { Flag } from '@wise/art';
import Circle, { CircleProps } from '../common/circle';
import Image from '../image';
import type { BadgeProps } from './Badge';
import { Plus } from '@transferwise/icons';
import { Size } from '../common';

export type Props = {
  status?: StatusIconProps['sentiment'];
  flagCode?: string;
  imgSrc?: string;
  icon?: React.ReactNode;
  type?: 'action' | 'reference';
  size?: BadgeProps['size'];
};

/**
 * Common pre-built badge variants.
 */
export default function BadgeAssets({
  status,
  flagCode,
  imgSrc,
  icon = null,
  type = 'action',
  size: sizeProp,
}: Props) {
  // map to old size (sm, lg) to new ones (numeric)
  const size: CircleProps['size'] = sizeProp === Size.LARGE ? 24 : 16;
  if (status) {
    return <StatusIcon sentiment={status} size={size} />;
  }
  if (flagCode) {
    return (
      <Circle size={size} fixedSize enableBorder>
        <Flag code={flagCode} intrinsicSize={size} />
      </Circle>
    );
  }
  if (imgSrc) {
    return (
      <Circle size={size} fixedSize enableBorder>
        <Image src={imgSrc} alt="" />
      </Circle>
    );
  }
  if (['action', 'reference'].includes(type)) {
    return (
      <Circle
        size={size}
        fixedSize
        style={{
          backgroundColor:
            type === 'action'
              ? 'var(--color-interactive-accent)'
              : 'var(--color-background-neutral)',
        }}
      >
        {icon ?? <Plus />}
      </Circle>
    );
  }
  return null;
}
