import React, { useState } from 'react';

const AutoSuggestFields = () => {
  const [cluster, setCluster] = useState('');
  const [subdivision, setSubdivision] = useState('');
  const [career, setCareer] = useState('');

  const clusters = ['Cluster A', 'Cluster B', 'Cluster C'];
  const subdivisions = {
    'Cluster A': ['Subdivision A1', 'Subdivision A2'],
    'Cluster B': ['Subdivision B1', 'Subdivision B2'],
    'Cluster C': ['Subdivision C1', 'Subdivision C2'],
  };
  const careers = {
    'Subdivision A1': ['Career A1-1', 'Career A1-2'],
    'Subdivision B1': ['Career B1-1', 'Career B1-2'],
    'Subdivision C1': ['Career C1-1', 'Career C1-2'],
  };

  const handleClusterChange = (e) => {
    setCluster(e.target.value);
    setSubdivision('');
    setCareer('');
  };

  const handleSubdivisionChange = (e) => {
    setSubdivision(e.target.value);
    setCareer('');
  };

  return (
    <div>
      <label>
        Cluster:
        <input
          type="text"
          list="cluster-options"
          value={cluster}
          onChange={handleClusterChange}
        />
        <datalist id="cluster-options">
          {clusters.map((c) => (
            <option key={c} value={c} />
          ))}
        </datalist>
      </label>

      <label>
        Subdivision:
        <input
          type="text"
          list="subdivision-options"
          value={subdivision}
          onChange={handleSubdivisionChange}
          disabled={!cluster}
        />
        <datalist id="subdivision-options">
          {(subdivisions[cluster] || []).map((s) => (
            <option key={s} value={s} />
          ))}
        </datalist>
      </label>

      <label>
        Career:
        <select
          value={career}
          onChange={(e) => setCareer(e.target.value)}
          disabled={!subdivision}
        >
          <option value="">Select a career</option>
          {(careers[subdivision] || []).map((c) => (
            <option key={c} value={c}>
              {c}
            </option>
          ))}
        </select>
      </label>
    </div>
  );
};

export default AutoSuggestFields;