import { InputHTMLAttributes } from 'react'

import {
  Wrapper,
  Input,
  Label,
} from './styled'

type Props = Pick<InputHTMLAttributes<HTMLInputElement>, (
  | 'checked'
  | 'id'
  | 'name'
  | 'onClick'
)> & {
  label?: string,
}

export const Checkbox = ({
  checked,
  id,
  label,
  name,
  onClick,
}: Props) => (
  <Wrapper>
    <Input
      id={id}
      type='checkbox'
      name={name}
      checked={checked}
      onClick={onClick}
    />
    <Label htmlFor={id}>{label}</Label>
  </Wrapper>
)