Proyectos de Subversion LeadersLinked - SPA

import React from 'react'
import { useController } from 'react-hook-form'
import styled from 'styled-components'

import FormErrorFeedback from '../FormErrorFeedback'

const CheckboxContainer = styled.div`
  display: inline-flex;
  align-items: center;
  * {
    cursor: pointer;
  }

  span {
    display: inline-block;
    width: 15px;
    height: 15px;
    position: relative;
    border: 1px solid #d2d2d2;
    border-radius: 100px;
    &::before {
      content: '';
      border-radius: 100px;
      background-color: #e44d3a;
      width: 8px;
      height: 8px;
      inset: 0;
      margin: auto;
      position: absolute;
      opacity: 0;
      visibility: hidden;
    }
  }

  input {
    visibility: hidden;
  }

  input:checked + span::before {
    opacity: 1;
    visibility: visible;
  }

  label {
    font-size: 14px;
    margin-left: 10px;
  }
`

const Checkbox = ({ name, control, rules = {}, label = '', error = '' }) => {
  const { field } = useController({
    name,
    control,
    rules
  })

  return (
    <>
      <CheckboxContainer>
        <span></span>
        <input
          type='checkbox'
          onChange={field.onChange}
          onBlur={field.onBlur}
          value={field.value}
          name={field.name}
          ref={field.ref}
        />
        <label htmlFor={field.name}>{label}</label>
      </CheckboxContainer>
      {error ? <FormErrorFeedback>{error}</FormErrorFeedback> : null}
    </>
  )
}

export default Checkbox