import { styled } from 'styleh-components'
import Label from 'atoms/Text/Label'
import Link from 'atoms/Link'

const StyledButton = styled.button`
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px;
  cursor: pointer;
`

const LinkWrapper = styled.div``

const StyledLink = styled.withComponent(Link)`
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 10px;
  cursor: pointer;
  text-decoration: none;
  color: #2c2c2c;
`

const ButtonIcon = styled.span`
  margin: 5px;
  ${props =>
    props.orderArrange !== 'none' &&
    styled.css`
      order: ${props.orderArrange};
    `};
`
const ButtonLabel = styled.withComponent(Label)`
  text-transform: uppercase;
  font-size: 16px;
  margin: 5px;
  cursor: pointer;
`

export { ButtonIcon, ButtonLabel, StyledButton, LinkWrapper, StyledLink }