import React from 'react'
import styled from 'styled-components'

import { Row, RowItem, LabelHeader, LinkText } from '../UIComponents/FormItems'

const EmailNotifications = ({ subscribed = '' }) => (
  <Root>
    <Row noMargin>
      <RowItem>
        <LabelHeader>Email Notifications </LabelHeader>
      </RowItem>
    </Row>
    {!subscribed ? (
      <Row noMargin>
        <RowItem>
          <LinkText>Re-subscribe</LinkText>
        </RowItem>
      </Row>
    ) : (
      <Row noMargin>
        <RowItem>
          <LinkText>Unsubscribe</LinkText>
        </RowItem>
      </Row>
    )}
  </Root>
)

export default EmailNotifications

// #region styles
const Root = styled.div`
  display: flex;
  flex-direction: column;
  max-width: 30em;
`
// #endregion