Proyectos de Subversion LeadersLinked - SPA

import React, { useState } from 'react'
import { useController } from 'react-hook-form'
import styled, { css } 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 {
    display: none;
  }

  label {
    font-size: 14px;
    margin-left: 10px;
    line-height: 1;
  }

  ${(props) =>
    props.isChecked &&
    css`
      margin-bottom: 0.5rem;
      span::before {
        visibility: visible;
        opacity: 1;
      }
    `}
`

const Checkbox = ({ name, control, rules = {}, label = '', error = '' }) => {
  const [isChecked, setIsChecked] = useState(false)

  const { field } = useController({
    name,
    control,
    rules
  })

  field.onChange = (e) => {
    setIsChecked(e.target.checked)
  }

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

export default Checkbox