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 { UNBREAKABLE_SPACE } from '../../../common/constants';

type TProps = {};

export const InfoPopup: React.FC<TProps> = () => {
  return (
    <SBox pb={9} pt={5}>
      <SBox alignItems="center" px={30}>
        <SInfoTitle mb={9}>What are Latest Adds?</SInfoTitle>
        <SInfoParagraph center>
          These are the playlists that a{UNBREAKABLE_SPACE}track was added to
          {UNBREAKABLE_SPACE}
          in{UNBREAKABLE_SPACE}the{UNBREAKABLE_SPACE}past 7 available days.
          They&apos;re ranked by{UNBREAKABLE_SPACE}the{UNBREAKABLE_SPACE}date
          the
          {UNBREAKABLE_SPACE}track was added to{UNBREAKABLE_SPACE}the
          {UNBREAKABLE_SPACE}playlist and filtered by{UNBREAKABLE_SPACE}user
          market.
        </SInfoParagraph>
      </SBox>
    </SBox>
  );
};