import React, { useState, useEffect } from 'react';
import { fetchSchools } from '../utils/apiUtils.js';

function EducationalPrograms({ cipCode, userState }) {
  const [schools, setSchools] = useState([]);
  const [error, setError] = useState(null);

  useEffect(() => {
    const loadSchools = async () => {
      if (!cipCode || !userState) {
        setError('CIP Code or user state is missing');
        return;
      }

      try {
        const filteredSchools = await fetchSchools(cipCode, userState);
        setSchools(filteredSchools);
      } catch (error) {
        console.error('Error fetching schools:', error);
        setError('Failed to load schools data');
      }
    };

    loadSchools();
  }, [cipCode, userState]);

  if (error) {
    return <div className="error">{error}</div>;
  }

  if (schools.length === 0) {
    return <div>No schools found for the selected CIP Code.</div>;
  }

  return (
    <div className="educational-programs">
      <h3>Educational Programs</h3>
      <ul>
        {schools.map((school, index) => (
          <li key={index}>
            <strong>{school['Institution Name']}</strong><br />
            Degree Type: {school['Degree Type']}<br />
            CIP Code: {school['CIP Code']}
          </li>
        ))}
      </ul>
    </div>
  );
}

export default EducationalPrograms;