import React from 'react';
import { Icon } from './icon';
import { SDistributorIconBox } from '../s-components/s-distributor-icon-box';
import { EDistributor } from '../constants';

type TProps = {
  variant: EDistributor;
  rounded?: boolean;
};

export const DistributorIcon: React.FC<TProps> = ({
  variant,
  rounded = false,
}) => {
  const isSony = variant === EDistributor.sme;
  const isOrchard = variant === EDistributor.theorchard;
  const bgColor = isSony ? 'vulcan' : isOrchard ? 'mySin2' : 'lavender';
  const generalIconStyles = { size: 22, color: 'white' };
  const sonyIconStyles = { ml: 1, mt: 1, ...generalIconStyles };
  const orchardIconStyles = { ml: 1, ...generalIconStyles };
  const awalIconStyles = { ml: 1, mt: 1, ...generalIconStyles };
  const testID = `${variant}-distributor`;

  const iconStyles = isSony
    ? sonyIconStyles
    : isOrchard
    ? orchardIconStyles
    : awalIconStyles;

  if (rounded) {
    return (
      <SDistributorIconBox testID={testID} bg={bgColor} borderRadius={2}>
        <Icon name={variant} {...iconStyles} />
      </SDistributorIconBox>
    );
  }

  return (
    <SDistributorIconBox testID={testID} bg={bgColor} borderTopRightRadius={2}>
      <Icon name={variant} {...iconStyles} />
    </SDistributorIconBox>
  );
};