import React from 'react'
import Skeleton, { SkeletonTheme } from 'react-loading-skeleton'

export const LoadingLinesThemeProvider = (props) => {
  return <SkeletonTheme color="var(--colorGrayLightest0)" highlightColor="var(--colorGrayLightest00)">
    {props.children}
  </SkeletonTheme>
}

export const LoadingLines = (props) => {
  return <Skeleton {...props} />
}

LoadingLines.Content = () => {
  return (
    <>
      <div style={{ fontSize: 36, marginBottom: 12 }} >
        <LoadingLines />
      </div>
      <LoadingLines width="95%" />
      <LoadingLines width="90%" />
      <LoadingLines width="93%" />
      <LoadingLines width="75%" />
    </>
  )
}

LoadingLines.Table = () => {
  return (
    <>
      <div style={{ fontSize: 24 }}>
        <LoadingLines />
      </div>
      <LoadingLines count={10} />
    </>
  )
}
