import React from 'react'
import { Control, Controller } from 'react-hook-form'

import { CheckboxContainer, CheckboxFill, Container, Label } from './styles'

interface CheckboxProps {
  label: string
  name: string
  control: Control<any>
}
const Checkbox = ({ label, name, control }: CheckboxProps) => {
  return (
    <Controller
      name={name}
      defaultValue={false}
      control={control}
      render={({ field: { onChange, value } }) => {
        return (
          <Container>
            <CheckboxContainer onPress={() => onChange(!value)}>
              {value && <CheckboxFill />}
            </CheckboxContainer>
            <Label>{label}</Label>
          </Container>
        )
      }}
    />
  )
}

export default Checkbox