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

type TProps = {};

export const InfoPopup: React.FC<TProps> = () => {
  return (
    <SBox pb={9} pt={5}>
      <SBox alignItems="center" px={16}>
        <SInfoTitle mb={9}>What are Top 5 Playlists?</SInfoTitle>
        <SInfoParagraph center>
          These are the playlists that brought {'\n'}
          in the most track streams in the selected{'\n'}
          market in the past 7 days.{'\n'}
          Filtered by user market.
        </SInfoParagraph>
      </SBox>
    </SBox>
  );
};