benefits2.jsx

import React, { useState } from 'react';

const Benefits = () => {
  const [selectedCategory, setSelectedCategory] = useState(null);

  const handleCategoryClick = (category) => {
    setSelectedCategory(category);
    // Implement logic to update eligible dependents based on the selected category here.
  };

  // Define a mapping of categories to eligible dependents.
  const categoryDependents = {
    'Category A': [2, 4, 6, 8],
    'Category B': [1, 5, 7, 9],
    'Category C': [10, 12, 34, 56],
  };

  return (
    <>
      <div className='categories-table'>
        <table>
          <thead>
            <tr>
              <th>Categories</th>
            </tr>
          </thead>

          <tbody>
            <tr style={{ cursor: 'pointer' }} onClick={() => handleCategoryClick('Category A')}>
              <td>Category A</td>
            </tr>

            <tr style={{ cursor: 'pointer' }} onClick={() => handleCategoryClick('Category B')}>
              <td>Category B</td>
            </tr>

            <tr style={{ cursor: 'pointer' }} onClick={() => handleCategoryClick('Category C')}>
              <td>Category C</td>
            </tr>
          </tbody>
        </table>

        {/* End of Table 1 */}
        <table>
          <thead>
            <tr>
              <th>Category Benefits</th>
              <th>Eligible Dependents</th>
            </tr>
          </thead>

          <tbody>
            {selectedCategory && categoryDependents[selectedCategory].map((dependents, index) => (
              <tr key={index}>
                <td>{`Benefit ${index + 1}`}</td>
                <td>{dependents}</td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
      {/* End of Table 2 */}
    </>
  );
};

export default Benefits;