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 Removals?</SInfoTitle>
        <SInfoParagraph center>
          These are the{UNBREAKABLE_SPACE}playlists that a{UNBREAKABLE_SPACE}
          track was removed from 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 removed from{UNBREAKABLE_SPACE}
          the
          {UNBREAKABLE_SPACE}
          playlist and filtered by{UNBREAKABLE_SPACE}the{UNBREAKABLE_SPACE}
          user market.
        </SInfoParagraph>
      </SBox>
    </SBox>
  );
};