import React from 'react';
import { SBox } from '../s-components/layout/s-box';
import { SInfoTitle } from '../s-components/s-info-title';
import { SInfoParagraph } from '../s-components/s-info-paragraph';
import { formatDate } from '../../charts/transducers';

type TProps = {
  vendor?: string;
  date: string;
};

export const TopCharts: React.FC<TProps> = props => {
  const { vendor, date } = props;

  const title =
    vendor === 'spotify'
      ? 'Spotify Daily Top 200 Charts'
      : 'Apple Music Top 100 Charts';

  return (
    <SBox alignItems="center" px={16} pt={7} mb={8}>
      <SInfoTitle uppercase mb={8}>
        {title}
      </SInfoTitle>
      <SInfoParagraph center>{`For ${formatDate(date)}`}</SInfoParagraph>
    </SBox>
  );
};