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

import { useStatsView } from './hooks'
import { StatsTable } from './components/StatsTable'
import { Powered, Container } from './styled'

const StatsView = () => {
  const { matchProfile, teamsStats } = useStatsView()

  return (
    <Container>
      <header className='header__logo'>
        <Logo />
      </header>
      <main>
        {matchProfile?.team1 && matchProfile?.team2 && (
          <StatsTable
            profile={matchProfile}
            teamsStats={teamsStats}
          />
        )}
      </main>
      <footer className='footer__powered'>
        <a target='_blank' href='https://india.insports.tv' rel='noreferrer'>
          <Powered>
            <T9n t='powered_by' />
          </Powered>
        </a>
      </footer>
    </Container>
  )
}

export default StatsView