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;
  }

  input[type='checkbox'],
  input[type='radio'] {
    display: none;
    & + 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;
      }
    }
    &: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