import React, { useState } from 'react';
import { Checkbox } from 'antd';

const RecursiveCheckbox = ({ data, parentChecked, onCheckChange }) => {
  const [checked, setChecked] = useState(parentChecked);
  const [indeterminate, setIndeterminate] = useState(false);

  const handleCheckChange = e => {
    setChecked(e.target.checked);
    onCheckChange(e.target.checked);
  };

  const handleChildCheckChange = childChecked => {
    if (!childChecked && checked) {
      setChecked(false);
      setIndeterminate(true);
    } else if (childChecked && !checked) {
      setChecked(true);
      setIndeterminate(false);
    }
  };

  return (
    <div>
      <Checkbox checked={checked} indeterminate={indeterminate} onChange={handleCheckChange}>
        {data.name}
      </Checkbox>
      {data.children &&
        data.children.map(child => (
          <RecursiveCheckbox
            key={child.id}
            data={child}
            parentChecked={checked}
            onCheckChange={handleChildCheckChange}
          />
        ))}
    </div>
  );
};

export default RecursiveCheckbox;
