import { useTranslation } from 'react-i18next'
import { styled } from '@mui/system'
import { Container } from '@mui/material'

import { HrefButton } from 'components/button'

const StyledWrapper = styled('div')({
  paddingTop: '2rem',
})

const StyledParagraph = styled('p')({
  fontSize: '1rem',
})

export default function LoginPage() {
  const { t } = useTranslation(['frontpage'])

  return (
    <StyledWrapper>
      <Container maxWidth="sm">
        <h2>{t('header')}</h2>
        <StyledParagraph>{t('description')}</StyledParagraph>
        <HrefButton to="/oidc/authenticate/">{t('login')}</HrefButton>
      </Container>
    </StyledWrapper>
  )
}