import React, { useContext } from 'react';
import { Skeleton } from './skeleton';
import { GraphSmall } from './graph-small';
import { ContextGraph } from '../../contexts';
import { SErrorContainer } from '../../s-components/graph/s-error-container';
import { SText } from '../../../common/s-components/typography/s-text';

type TProps = {};

export const TiktokGraph: React.FC<TProps> = () => {
  const { graph, refresh } = useContext(ContextGraph);

  const showSkeleton = graph.loading && !refresh;

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

  if (graph.error) {
    return (
      <SErrorContainer>
        <SText>Data failed to load.</SText>
      </SErrorContainer>
    );
  }

  return <GraphSmall />;
};