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';
import { theme } from '../../app/theme';
import { SText } from '../../common/s-components/typography/s-text';
import { UNBREAKABLE_SPACE } from '../../common/constants';

export const InfoDemographic: React.FC = () => {
  return (
    <SBox mt={5} mb={9}>
      <SBox alignItems="center" px={16}>
        <SInfoTitle center mb={9}>
          What are Audience Demographics?
        </SInfoTitle>
        <SInfoParagraph center>
          The data displayed gives a personal, in depth{'\n'}
          breakdown of the artist’s audience — showing{'\n'}
          the gender and age range. Some data may be{'\n'}
          delayed depending on DSPs.
        </SInfoParagraph>
      </SBox>
      <SBox mt={19} mb={32} width={1} height={1} bg={theme.colors.snuff} />
      <SBox px={16}>
        <SInfoParagraph mb={16}>
          Differences in demographics and sources{'\n'}
          <SText bold color="richBlack">
            total stream count
          </SText>{' '}
          are due to the varying logic used{UNBREAKABLE_SPACE}by
          {UNBREAKABLE_SPACE}DSPs.
        </SInfoParagraph>
        <SInfoParagraph>
          <SText bold color="richBlack">
            Apple Music
          </SText>{' '}
          does not provide information{'\n'}
          about listeners under 18 years old{'\n'}
          because of internal policies.
        </SInfoParagraph>
      </SBox>
    </SBox>
  );
};