import { Fragment, h } from 'preact'
import { bool, string } from 'prop-types'

import Logo from '../Logo'
import { H2, P } from '../Text'
import { InfoButton, OverlayWrapper, TopLeft } from './styles'

const VideoOverlay = ({ active, title, org, setInfoActive, onClick }) => (
  // const displayTitle = `${title}${org ? ` — ${org}` : ''}`

  <Fragment>
    <OverlayWrapper onClick={onClick}>
      <TopLeft $active={active}>
        <Logo active={active} />
        <P
          size={18}
          css={`
            margin-top: 16px;
          `}
        >
          {title}
        </P>
      </TopLeft>
    </OverlayWrapper>
    <InfoButton $active={active} onClick={() => setInfoActive(true)} />
  </Fragment>
)

VideoOverlay.propTypes = {
  active: bool,
  title: string.isRequired,
  org: string,
}

export default VideoOverlay
