import React from 'react'

type Props = {
  bgSrc?: string
  children?: React.ReactNode
}

export const VNViewport: React.FC<Props> = ({ bgSrc = '/bg.jpg', children }) => {
  return (
    <div className="viewport">
      <div className="viewport-inner">
        <div className="bg">
          {bgSrc && <img src={bgSrc} alt="Background" />}
        </div>
        {children}
      </div>
      <div className="scanlines" aria-hidden="true" />
      <div className="crt-glow" aria-hidden="true" />
      <div className="dither-pattern" aria-hidden="true" />
    </div>
  )
}