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

const StyledIcon = styled(MaterialIcon)``

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: var(--color-black);
`

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

export {
  ButtonIcon,
  ButtonText,
  StyledButton,
  LinkWrapper,
  StyledLink,
  StyledIcon,
}