import React from 'react'
import {MdEvent, MdCancel} from 'react-icons/lib/md'
import styled from 'styled-components'
import {circle} from 'common/styles'

export default ({background_color}) => (
  <Container>
    <MdEvent />
    <Qualifier background_color={background_color}>
      <MdCancel />
    </Qualifier>
  </Container>
)

const Container = styled.div`
  position: relative;
`
const Qualifier = styled.div`
  ${circle(16)}
  background-color: ${({background_color}) => background_color};
  position: absolute;
  right: 0;
  bottom: 0;
  font-size: 70%;
  display: flex;
  align-items: center;
  justify-content: center;
`