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 InfoChartPlacement: React.FC = () => {
  return (
    <SBox pb={9} pt={5}>
      <SBox alignItems="center" px={16}>
        <SInfoTitle mb={9}>What are Chart Placements?</SInfoTitle>
        <SInfoParagraph center>
          Shows current track performance {'\n'}on Spotify Daily Top 200 and
          Apple Music {'\n'}Top 100 charts across all markets.{'\n'}
          Each market has a chart date as there may{'\n'} be a delay depending
          on DSPs.
        </SInfoParagraph>
      </SBox>
    </SBox>
  );
};