import { Box } from '../../elements/LayoutPrimitives'
import { theme } from '../../tokens/stitches.config'

type SkeletonArticleContainerProps = {
  margin?: number
  fontSize?: number
  fontFamily?: string
  lineHeight?: number
  children?: React.ReactNode
}

export function SkeletonArticleContainer(
  props: SkeletonArticleContainerProps
): JSX.Element {
  const styles = {
    margin: props.margin ?? 360,
    fontSize: props.fontSize ?? 20,
    lineHeight: props.lineHeight ?? 150,
    fontFamily: props.fontFamily ?? 'inter',
    readerFontColor: theme.colors.readerFont.toString(),
    readerTableHeaderColor: theme.colors.readerTableHeader.toString(),
    readerHeadersColor: theme.colors.readerFont.toString(),
  }

  return (
    <>
      <Box
        id="article-container"
        css={{
          width: '100%',
          height: '100vh',
          padding: '16px',
          maxWidth: '100%',
          background: theme.colors.grayBg.toString(),
          '--text-font-family': styles.fontFamily,
          '--text-font-size': `${styles.fontSize}px`,
          '--line-height': `${styles.lineHeight}%`,
          '--blockquote-padding': '0.5em 1em',
          '--blockquote-icon-font-size': '1.3rem',
          '--figure-margin': '1.6rem auto',
          '--hr-margin': '1em',
          '--font-color': styles.readerFontColor,
          '--table-header-color': styles.readerTableHeaderColor,
          '@sm': {
            '--blockquote-padding': '1em 2em',
            '--blockquote-icon-font-size': '1.7rem',
            '--figure-margin': '2.6875rem auto',
            '--hr-margin': '2em',
            margin: `0px`,
          },
          '@md': {
            maxWidth: 1024 - styles.margin,
          },
          '@lg': {
            margin: `0`,
            maxWidth: 1024 - styles.margin,
          },
        }}
      >
        {props.children}
        {/* <Box css={{ width: '100%', height: '100%', textAlign: 'center', verticalAlign: 'middle' }}>
          Saving Page
        </Box> */}
      </Box>
    </>
  )
}