benfits 1page.

import React, { useState } from 'react';

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

  const handleCategoryClick = (category) => {
    setSelectedCategory(category);
    // Update the eligible dependents based on the selected category here.
    // You can implement this logic based on your data structure.
  };

  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>
            <tr>
              <td>Outpatient</td>
              <td>{selectedCategory === 'Category A' ? 2 : null}</td>
            </tr>
            <tr>
              <td>Inpatient</td>
              <td>{selectedCategory === 'Category A' ? 4 : null}</td>
            </tr>
            <tr>
              <td>Optical</td>
              <td>{selectedCategory === 'Category A' ? 6 : null}</td>
            </tr>
            <tr>
              <td>Dental</td>
              <td>{selectedCategory === 'Category A' ? 8 : null}</td>
            </tr>
          </tbody>
        </table>
      </div>
      {/* End of Table 2 */}
    </>
  );
};

export default Benefits;