import { InfoIcon } from 'components/InfoIcon/InfoIcon'
import styled, { css } from 'styled-components'
import { T9n } from 'features/T9n'
import { isMobileDevice } from 'config/userAgent'

const Wrapper = styled.div`
  display: flex;
  color: rgba(255, 255, 255, 0.8);
  font-size: 16px;
  max-width: 340px;
  margin-top: 50px;

  ${isMobileDevice
    ? css`
    margin-top: 25px;
    font-size: 12px;
  `
    : ''}
`

const WrapperIcon = styled.div`
  margin-right: 10px;
`

export const UnsubscribePrompt = () => (
  <Wrapper>
    <WrapperIcon>
      <InfoIcon />
    </WrapperIcon>
    <T9n t='unsubscribe_prompt' />
  </Wrapper>
)
