import React, { useContext } from 'react';
import { Skeleton } from './skeleton';
import { SBox } from '../../../common/s-components/layout/s-box';
import { GraphSmall } from './graph-small';
import { ContextPerformance, ContextViews } from '../../contexts';

type TProps = {};

export const YoutubeViews: React.FC<TProps> = () => {
  const { visibility: visibilityView, refresh } = useContext(ContextViews);
  const { visibility: visibilityPerformance } = useContext(ContextPerformance);

  const showSkeleton =
    visibilityView.skeleton && visibilityPerformance.skeleton && !refresh;

  return <SBox>{showSkeleton ? <Skeleton /> : <GraphSmall />}</SBox>;
};