import React from 'react';
import { SBox } from '../../../common/s-components/layout/s-box';
import { SRow } from '../../../common/s-components/layout/s-row';
import { theme } from '../../../app/theme';
import { SCarouselDot } from '../../../common/s-components/s-carousel-dot';
import { Skeleton1 } from './skeletons/skeleton1';
import { Skeleton2 } from './skeletons/skeleton2';
import { Skeleton3 } from './skeletons/skeleton3';

export const Skeleton: React.FC = () => {
  return (
    <SBox position="relative" pt={4} alignItems="center" overflow="hidden">
      <Skeleton1 />
      <Skeleton2 />
      <Skeleton3 />
      <SRow>
        <SCarouselDot bg={theme.colors.eastBay} />
        <SCarouselDot bg={theme.colors.eastBay} />
      </SRow>
    </SBox>
  );
};