import React, { useState } from "react";
import { BsCheck } from "react-icons/bs";
import { PropTypes } from 'prop-types';
import { CheckboxControl, CheckboxInput, CheckboxLabel, CheckboxWrapper } from "./styles";


const Checkbox = ({
  label,
  color,
  defaultValue,
  onChange,
  size,
  ...props
}) => {
  const [checked, setChecked] = useState(defaultValue);

  const handleChange = (event) => {
    const newValue = event.target.checked;
    setChecked(newValue);
    onChange && onChange(newValue);
  };

  return (
    <CheckboxWrapper {...props}>
      <CheckboxInput checked={checked} onChange={handleChange} />
      <CheckboxControl 
          checked={checked} 
          color={color}  
          size={size}
          >
        <BsCheck />
      </CheckboxControl>
      <CheckboxLabel checked={checked} color={color}>
        {label}
      </CheckboxLabel>
    </CheckboxWrapper>
  );
};

Checkbox.propTypes = {
  label: PropTypes.string,
  color: PropTypes.string,
  size: PropTypes.string,
  onChange: PropTypes.func,
  defaultValue: PropTypes.bool,

};

Checkbox.defaultProps = {
  defaultValue: false,
};

export default Checkbox;
