import styled from 'styled-components/macro'

import { T9n } from 'features/T9n'

const Wrapper = styled.div`
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
`

const Message = styled.div`
  width: 12rem;
  padding: 0.567;
  color: #fff;
  background-color: #EB5757;
  box-shadow: 0px 1px 5px rgba(0, 0, 0, 0.25);
  border-radius: 10px;
`

const Title = styled.h3`
  font-weight: bold;
  font-size: 0.75rem;
  line-height: 0.95rem;
`

const Text = styled.p`
  font-size: 0.614;
  line-height: 0.75rem;
`

export const NoAccessMessage = () => (
  <Wrapper>
    <Message>
      <Title>
        <T9n t='no_match_access_title' />
      </Title>
      <Text>
        <T9n t='no_match_access_body' />
      </Text>
    </Message>
  </Wrapper>
)
