import React from 'react';
import { formatDate } from '../../charts/transducers';
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 { TVendor } from '../../common/types';

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

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

  const title =
    vendor === 'spotify' ? 'Spotify Top 200' : 'Apple Music Top 100';
  const body = date
    ? `Data last refreshed: ${formatDate(date)}`
    : 'No data is available';

  return (
    <SBox alignItems="center" px={16} pt={7} mb={-5}>
      <SInfoTitle uppercase mb={8}>
        {title}
      </SInfoTitle>
      <SInfoParagraph center>{body}</SInfoParagraph>
    </SBox>
  );
};