import React, { PureComponent } from 'react';
import { SBox } from '../../common/s-components/layout/s-box';
import { SRow } from '../../common/s-components/layout/s-row';
import { SkeletonButton } from './skeleton-button';
import { AnimatedGradient } from '../../common/components/animated-gradient';

type TProps = {};

export class Skeleton extends PureComponent<TProps> {
  render() {
    return (
      <SBox px={16}>
        <SRow justifyContent="center">
          <SkeletonButton width={117} mr={16} />
          <SkeletonButton width={130} />
        </SRow>
        <SBox position="absolute" top={0} left={0} height="100%" flex={1}>
          <AnimatedGradient angle={8} gradientWidth={160} />
        </SBox>
      </SBox>
    );
  }
}