import React from 'react'
import styled from 'styled-components'
import {space, fontWeight, fontSize, lineHeight, textAlign, display} from 'styled-system'

export const Text = styled.p`
  padding: 0;
  margin: 0;
  color: ${props => props.color ? props.theme.colors[props.color] : props.theme.colors.darkGrey};
  font-size: 14px;
  ${space}
  ${fontWeight}
  ${fontSize}
  ${lineHeight}
  ${textAlign}
  ${display}
`

export const MainText = (props) => <Text fontSize={16} fontWeight={700} {...props} />
export const Note = (props) => <Text color="lightGrey" fontSize={12} {...props} />
export const Title = (props) => <Text fontSize={40} fontWeight={700} lineHeight={1} {...props} />
