import React, { memo } from 'react';
import { SText } from '../../../common/s-components/typography/s-text';
import { setMarketCode } from '../../../common/transducers';
import { Flag } from '../../../common/components/flag';
import { SBox } from '../../../common/s-components/layout/s-box';
import { STopicText } from '../../s-components/s-topic-text';

type TProps = {
  target: string;
  variant?: 'light' | 'dark';
  countryCode: string;
  flagVariant: string;
  hasCountryCode: boolean;
};

export const TopicChartUpdate: React.FC<TProps> = memo(
  ({ target, variant, countryCode, flagVariant, hasCountryCode }) => {
    const color = variant === 'light' ? 'richBlack' : undefined;
    const space = ' ';
    const marketCode = setMarketCode(countryCode);
    return (
      <SBox>
        <STopicText color={color}>
          <SText bold color={color}>
            {target}
            {space}
          </SText>
          {hasCountryCode ? (
            <>
              <SText lineHeight="20px">&nbsp;</SText>
              <Flag
                variant={flagVariant}
                marginTop={0}
                market={marketCode}
                width={16}
                height={16}
                inlineFlag
              />
            </>
          ) : null}
          {space}has&nbsp;been&nbsp;updated
        </STopicText>
      </SBox>
    );
  }
);

TopicChartUpdate.defaultProps = {
  variant: 'dark',
  countryCode: undefined,
  flagVariant: 'light',
};