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 '../form/FormErrorFeedback'

const CheckboxContainer = styled.div`
  margin-bottom: 0.5rem;
  label {
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
  }

  span {
    display: inline-block;
    width: 15px;
    height: 15px;
    position: relative;
    border: 1px solid #d2d2d2;
    border-radius: 100px;
    margin-right: 0.5rem;
    &::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;
  }

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

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

  const handleChange = (e) => {
    setChecked(e.target.checked)
    field.onChange(e)
  }

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

export default Checkbox