// @flow
import React from 'react'
import styled, { css } from 'react-emotion'
import { color, position, top, right, bottom, left, themeGet, zIndex } from 'styled-system'
import { ButtonBase } from '../../elements/Button'
import Icons from '../../elements/Icons'

type Props = {
  width?: number,
  height?: number,
}

const CloseButton = ({ ...styles }: Props) => (
  // $FlowFixMe: Don't want to limit styled-system props
  <Button title="Close" {...styles} p={0}>
    <Icons type="Plus" height={styles.height} width={styles.width} className={css`transform: rotate(45deg)`} />
  </Button>
)

CloseButton.defaultProps = {
  width: 18,
  height: 18,
}

const Button = styled(ButtonBase)(
  { border: 'none' },
  ({ height, ...rest }) => ({
    color: themeGet('colors.darkBlue', '#1DC1C8')(rest),
    height: `${height * 2}`,
  }),
  color,
  position,
  top,
  right,
  bottom,
  left,
  zIndex,
)

export default CloseButton