import React from "react";
import PropTypes from "prop-types";
import Checkbox from "../checkbox/index2";
import { Container } from "./styles";

const CheckboxGroup = ({ color, options, selectedValues, onChange, size, }) => {
  const handleChange = (value) => {
    let newSelectedValues = [...selectedValues];
    if (newSelectedValues.includes(value)) {
      newSelectedValues = newSelectedValues.filter((v) => v !== value);
    } else {
      newSelectedValues.push(value);
    }
    onChange(newSelectedValues);
  };

  return (
    <Container>
      {options.map((option) => (
        <Checkbox
          key={option.value}
          label={option.label}
          color={color}
          value={option.value}
          size={size}         
          onChange={() => handleChange(option.value)}
          checked={selectedValues.includes(option.value)}
        />
      ))}
    </Container>
  );
};

CheckboxGroup.propTypes = {
  options: PropTypes.arrayOf(
    PropTypes.shape({
      label: PropTypes.string.isRequired,
      value: PropTypes.string.isRequired,
      color: PropTypes.string,
      size: PropTypes.string,
    })
  ).isRequired,
  selectedValues: PropTypes.arrayOf(PropTypes.string).isRequired,
  onChange: PropTypes.func.isRequired,
};

export default CheckboxGroup;
