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

type TProps = {};

export const InfoPopup: React.FC<TProps> = () => {
  return (
    <SBox pb={9} pt={4}>
      <SBox alignItems="center" px={25}>
        <SInfoTitle mb={12}>YouTube Top Markets</SInfoTitle>
        <SInfoParagraph center mb={12}>
          In this section, you will find the &apos;Top Markets for YouTube&apos;
          list. The list complies with 15 markets that have had the most views
          {'\n'}for the{UNBREAKABLE_SPACE}past 2 weeks.
        </SInfoParagraph>
        <SInfoParagraph>
          To see the full data, tap on the widget.
        </SInfoParagraph>
      </SBox>
    </SBox>
  );
};