import React, { useState, useEffect } from 'react'
import { Flex } from 'rebass'
import styled from 'styled-components'

const Star = styled(Flex)`
    width: 25px,
    height: 25px,
    border-radius: 50%,
    left: ${p => p.w}px,
    position: absolute,
    background-color: white,
`

export default () => {
  const [stars, setStars] = useState([])

  useEffect(() => {
    const r = Math.floor(Math.random() * 10) + 1
    const tmp = [...stars]
    for (const i = 0; i < r; i++) {
      tmp.push(Math.floor(Math.random() * window.innerWidth))
    }
    setStars(tmp)
  }, [])

  return (
    <Flex style={{ position: 'relative' }}>
      {stars.map(w => (
        <Star w={w} />
      ))}
    </Flex>
  )
}