import { useState, useEffect } from 'react';
import axios from 'axios';
import { AllModelsData, ModelMetrics } from '../types';

export function useResults() {
  const [data, setData] = useState<AllModelsData | null>(null);
  const [error, setError] = useState<string | null>(null);

  useEffect(() => {
    axios
      .get<{ model: string; metrics: AllModelsData[string] }[]>('http://localhost:8000/results')
      .then(res => {
        const transformed: AllModelsData = {};
        res.data.forEach(item => {
          transformed[item.model] = item.metrics;
        });
        setData(transformed);
      })
      .catch(err => {
        console.error(err);
        setError(err.message);
      });
  }, []);

  return { data, error };
}