import React, { memo, useContext } from 'react';
import { SH1 } from '../../../common/s-components/typography/s-h1';
import { Tag } from '../../../common/components/tag';
import { SVideosContainer } from '../../s-components/s-videos-container';
import { ContextAllVideo } from '../../contexts';
import { Skeleton } from './skeleton';

type TProps = {};

export const AllVideos: React.FC<TProps> = memo(() => {
  const { total, tiktokListLoading, refreshing } = useContext(ContextAllVideo);
  const showSkeleton = tiktokListLoading && !refreshing;
  const label = total ? `${total} Videos` : 'N/A';

  if (showSkeleton) {
    return (
      <SVideosContainer>
        <Skeleton />
      </SVideosContainer>
    );
  }

  return (
    <SVideosContainer>
      <SH1 pb={19}>All Videos</SH1>
      <Tag label={label} />
    </SVideosContainer>
  );
});