import { Icon } from 'features/Icon'
import { T9n } from 'features/T9n'

import {
  ScWrapper,
  ScLogo,
  ScTitle,
  ScText,
  ScButton,
  ScBody,
} from './styled'

const ThanksPage = () => {
  const onClose = () => {
    window.parent.postMessage('close')
  }

  const iframeZendesk = document.querySelector('#launcher') as HTMLElement
  if (iframeZendesk) iframeZendesk.style.display = 'none'

  return (
    <ScWrapper>
      <ScBody>
        <ScLogo color='red' />
        <Icon refIcon='CheckCircle' color='#fff' />
        <ScTitle>
          <T9n t='thanks_for_sub' />
        </ScTitle>
        <ScText>
          <T9n t='pb_instat' />
        </ScText>
        <ScButton onClick={onClose}>
          <T9n t='watch_match' />
        </ScButton>
      </ScBody>
    </ScWrapper>
  )
}

export default ThanksPage
