// @flow
import React, { type Node } from 'react'
import styled from 'react-emotion'
import { themeGet } from 'styled-system'
import Box from '../Box'
import { Span } from '../Text'
import { type EventType } from '../../types'

const TagItem = styled(Box)(
  {
    fontSize: 12,
    borderRadius: 4,
  },
  props => ({
    color: themeGet('colors.darkGray', '#4A4A4A')(props),
  }),
)

type Props = {
  tabIndex: number,
  onClick: (EventType) => void,
  onKeyPress: (EventType) => void,
  children: Node,
}

const MSTagItem = ({ tabIndex, onClick, onKeyPress, children }: Props) => (
  <TagItem
    px={2}
    py={1}
    mr="2px"
    bg="rgba(74,74,74,0.2)"
  >
    {children}
    <Span
      role="button"
      tabIndex={tabIndex}
      onKeyPress={onKeyPress}
      onClick={onClick}
      pl={2}
    >
      x
    </Span>
  </TagItem>
)

export default MSTagItem