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

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

/**
 * Common pre-built badge variants.
 */
export default function BadgeAssets({
  status,
  flagCode,
  imgSrc,
  icon = null,
  type = 'action',
  size,
}: Props) {
  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)',
          color:
            type === 'action' ? 'var(--color-interactive-control)' : 'var(--color-content-primary)',
        }}
      >
        {icon ?? <Plus />}
      </Circle>
    );
  }
  return null;
}