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;