import React from 'react';
import { SInfoTitle } from '../../common/s-components/s-info-title';
import { SBox } from '../../common/s-components/layout/s-box';
import { SInfoParagraph } from '../../common/s-components/s-info-paragraph';
import { TVendor } from '../../common/types';
import { UNBREAKABLE_SPACE } from '../../common/constants';

type TProps = {
  vendor: TVendor;
};

export const InfoPopup: React.FC<TProps> = props => {
  const { vendor } = props;
  const isSpotify = vendor === 'spotify';
  return (
    <SBox pb={9} pt={5}>
      <SBox alignItems="center" px={25}>
        <SInfoTitle mb={9}>What is Performance?</SInfoTitle>
        {isSpotify ? (
          <>
            <SInfoParagraph center mb={12}>
              This section displays the{UNBREAKABLE_SPACE}aggregated streams
              {UNBREAKABLE_SPACE}
              (Sony-only), listeners, and daily average metrics for
              {UNBREAKABLE_SPACE}the
              {UNBREAKABLE_SPACE}selected period{UNBREAKABLE_SPACE}and
              {UNBREAKABLE_SPACE}market. Streams/Listeners metric shows how many
              times on{UNBREAKABLE_SPACE}
              average a{UNBREAKABLE_SPACE}listener returns to
              {UNBREAKABLE_SPACE}the
              {UNBREAKABLE_SPACE}playlist.
            </SInfoParagraph>
            <SInfoParagraph center>
              Followers are displayed globally for{UNBREAKABLE_SPACE}the
              {UNBREAKABLE_SPACE}selected period. The daily average change
              metric means how many followers are gained or lost on
              {UNBREAKABLE_SPACE}average during this period.
            </SInfoParagraph>
          </>
        ) : (
          <SInfoParagraph center>
            This section displays the{UNBREAKABLE_SPACE}aggregated Sony
            {UNBREAKABLE_SPACE}
            streams and daily average metric for{UNBREAKABLE_SPACE}the
            {UNBREAKABLE_SPACE}selected period and owner market of
            {UNBREAKABLE_SPACE}the{UNBREAKABLE_SPACE}playlist.
          </SInfoParagraph>
        )}
      </SBox>
    </SBox>
  );
};