import { useNoNetworkPopupStore } from 'features/NoNetworkPopup'
import { Background } from 'features/Background'

import {
  ArrowLoader,
  Container,
  Logo,
  SubTitle,
  Title,
  Wrapper,
} from './styled'

export * from './store'

export const NoNetworkPopup = () => {
  const { isOnline } = useNoNetworkPopupStore()

  if (isOnline) return null

  return (
    <Wrapper>
      <Background>
        <Container>
          <Logo />
          <ArrowLoader />
          <Title t='lost_connection' />
          <SubTitle t='check_connection' />
        </Container>
      </Background>
    </Wrapper>
  )
}
