import * as React from "react"
import styled from "styled-components"
import Icon from "../icon"

const Container = styled.div`
  border: 3px solid ${(props) => props.theme.pumpkin};
  border-radius: 4px;
  display: inline-block;
  color: ${(props) => props.theme.pumpkin};
  font-size: 1.5em;
  position: relative;
`
// ghost native input for Form input
const InputCheck = styled.input`
  opacity: 0;
  position: absolute;
`

interface CheckboxPropTypes extends React.InputHTMLAttributes<any> {

}
const Checkbox = ({ className, style, onClick, type, checked, name }: CheckboxPropTypes) => {
  return (
    <Container className={className} style={style} onClick={onClick}>
      <Icon name="check" className={`item animated ${checked ? "jello" : ""}`} style={{opacity: checked ? 1 : 0}} />
      <InputCheck type="checkbox" name={name} checked={checked} />
    </Container>
  )
}

export default Checkbox