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

export const InfoPopup: React.FC = () => {
  return (
    <SBox pt={4} pb={9}>
      <SBox alignItems="center">
        <SInfoTitle mb={13}>TikTok KPIs</SInfoTitle>
        <SInfoParagraph center>
          This section displays market-specific data{'\n'}of creations and views
          for a two-week period.{'\n'}Also included in this section is insight
          {'\n'}on the best-performing creations day{'\n'}within the last 2
          weeks.
        </SInfoParagraph>
      </SBox>
    </SBox>
  );
};