import React from 'react'
import {MdCheckBox, MdCheckBoxOutlineBlank} from 'react-icons/lib/md'
import styled, {css} from 'styled-components'
import {link, disabled_link, color} from 'common/styles'

export default ({toggle, selected, locked, children: label}) => (
  <Container onClick={locked ? null : toggle} locked={locked} selected={selected}>
    {selected ? <MdCheckBox/> : <MdCheckBoxOutlineBlank/>}
    <Label>
      {label}
    </Label>
  </Container>
)

const Container = styled.div`
  ${({locked, onClick}) => !locked && onClick ? link : disabled_link}
  font-size: 20px;
  display: flex;
  align-items: center;
  margin: 5px;
  ${({selected, locked}) => locked ? css`
    color: ${color('black', 'bright')};
  ` : selected ? css`
    color: ${color('primary', 'light')};
  ` : ''}
`
const Label = styled.div`
  font-size: 14px;
  margin-left: 20px;
`