import React, { useState, useRef, useEffect } from 'react'
import { Skeleton } from 'antd'
import { useWindowSize } from '../../../utils/hooks'
import './index.less'

function FakeBoard (props) {
  const { title = true, avatar = true, rows, style } = props

  const winSize = useWindowSize()
  const wrapRef = useRef(null)
  const [computedRows, setComputedRows] = useState(0)
  useEffect(() => {
    const { clientHeight } = wrapRef.current
    setComputedRows(Math.abs(Math.floor((clientHeight - 48) / 32)))
  }, [wrapRef.current, winSize])

  return (
    <div ref={wrapRef} className='board-page__fake-board' style={style}>
      <Skeleton title={title} avatar={avatar} paragraph={{ rows: rows || computedRows }} />
    </div>
  )
}

export default FakeBoard
