import { memo, useEffect, useState } from 'react'
import { screenHeight, screenWidth } from '@/utils'
import { Block, VideoBox } from '@/@share/components'

const BACKGROUND_VIDEOS = [
  'https://cdn.roasmax.cn/material/b46f380532e14cf58dd350dbacc7c34a.mp4',
  'https://cdn.roasmax.cn/material/992e6c5d940c42feb71c27e556b754c0.mp4',
  'https://cdn.roasmax.cn/material/e4947477843f4067be7c37569a33d17b.mp4',
]

type BannerProps = { bgVideo?: string }
const BannerSection = memo<BannerProps>(function Banner({ bgVideo }) {
  const [bgUrl, setBgurl] = useState(() => BACKGROUND_VIDEOS[Math.floor(Math.random() * BACKGROUND_VIDEOS.length)])

  useEffect(() => {
    if (!bgVideo) return
    setBgurl(bgVideo)
  }, [bgVideo])

  return (
    <Block className="absolute inset-0 bottom-0 left-0 right-0 top-0 z-[0] overflow-hidden">
      <VideoBox url={bgUrl} width={512} style={{ width: screenWidth, height: screenHeight }} />
    </Block>
  )
})

export default BannerSection