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';

type TProps = {};

export const InfoPopup: React.FC<TProps> = () => {
  return (
    <SBox pt={4} pb={9}>
      <SBox alignItems="center">
        <SInfoTitle mb={13}>Views by Sources & Demography</SInfoTitle>
        <SInfoParagraph center>
          This section displays market-specific data{'\n'}and views for a
          two-week period. This data{'\n'}includes detailed information on
          sources{'\n'}as well as insight on the best-performing{'\n'}source and
          audience.
        </SInfoParagraph>
      </SBox>
    </SBox>
  );
};