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

type TProps = {
  streamsLatestDate: string;
};

export const InfoPopup: React.FC<TProps> = ({ streamsLatestDate }) => {
  return (
    <SBox alignItems="center" px={16} pt={4}>
      <SInfoTitle mb={9}>YouTube Videos</SInfoTitle>
      <SInfoParagraph px={10} mb={9}>
        Data last received: {formatYearDate(streamsLatestDate)}.
      </SInfoParagraph>
    </SBox>
  );
};