import React from 'react';
import { SBox } from '../../common/s-components/layout/s-box';
import { SInfoTitle } from '../../common/s-components/s-info-title';
import { SText } from '../../common/s-components/typography/s-text';
import { SInfoParagraph } from '../../common/s-components/s-info-paragraph';
import { theme } from '../../app/theme';

type TProps = {};

export const InfoStreamsMonitoring: React.FC<TProps> = () => {
  return (
    <SBox pb={9} pt={5}>
      <SBox alignItems="center" px={16}>
        <SInfoTitle mb={8}>What is Streams Monitoring?</SInfoTitle>
        <SInfoParagraph center>
          The cumulative distribution of audience
          {'\n'}engagement from the selected period.
          {'\n'}Data is represented by donut charts
          {'\n'}in each tab, which show individual DSPs
          {'\n'}and a combined view.
        </SInfoParagraph>
      </SBox>
      <SBox mt={19} mb={32} width={1} height={1} bg={theme.colors.snuff} />
      <SBox px={16}>
        <SInfoParagraph mb={16}>
          The breakdown shows the following analytics:
        </SInfoParagraph>
        <SInfoParagraph mb={16}>
          <SText bold color="richBlack">
            Lean Forward
          </SText>{' '}
          indicates streams based
          {'\n'}on the audience actively engaging with a track
          {'\n'}by streaming it through album and artist
          {'\n'}pages, adding it to collections, and searching.
        </SInfoParagraph>
        <SInfoParagraph mb={17}>
          <SText bold color="richBlack">
            Lean Back
          </SText>{' '}
          indicates streams based
          {'\n'}on audience passively engaging with a track
          {'\n'}by streaming from playlists, charts, radio, etc.
        </SInfoParagraph>
        <SInfoParagraph>
          There may be a delay depending on the DSPs.
        </SInfoParagraph>
      </SBox>
    </SBox>
  );
};