import React from 'react';
import { Undefinable } from 'tsdef';
import { SBox } from '../../common/s-components/layout/s-box';
import { SInfoParagraph } from '../../common/s-components/s-info-paragraph';
import { SInfoTitle } from '../../common/s-components/s-info-title';
import { SH4 } from '../../common/s-components/typography/s-h4';
import { theme } from '../../app/theme';
import { getMarketArticleValue } from '../../common/transducers';
import { TVendor } from '../../common/types';

export type TProps = {
  vendor: Undefinable<TVendor>;
  market: string;
};

export const InfoExits: React.FC<TProps> = props => {
  const { vendor, market } = props;
  const title = vendor === 'spotify' ? 'Spotify Daily' : 'Apple Music';
  const chartQuantity = vendor === 'spotify' ? '200' : '100';
  const marketValue = getMarketArticleValue(market);

  return (
    <SBox alignItems="center" px={16} pb={9} pt={5}>
      <SInfoTitle mb={9}>What are Exits?</SInfoTitle>
      <SInfoParagraph center>
        Tracks that left the {title}
        {'\n'} Top {chartQuantity} chart in{' '}
        <SH4 color={theme.colors.richBlack}>{marketValue}</SH4>
        {'\n'} in the past 24 hours.
      </SInfoParagraph>
    </SBox>
  );
};