import './App.css'
import Main from "./modules/main/components/Main.tsx";
import Footer from "./modules/footer/components/Footer.tsx";
import {useEffect, useState} from "react";
import type {CharacterData} from "./types/CharacterJson.ts";
import Header from "./modules/header/components/Header.tsx";

function App() {
  const [jsonData, setJsonData] = useState<CharacterData | null>(null);
  const [loading, setLoading] = useState(true);
  
  useEffect(() => {
    const loadData = async () => {
      try {
        const response = await fetch('/data/Faelyn Eichenhauch.json');
        if (!response.ok) {
          throw new Error(`HTTP error! status: ${response.status}`);
        }
        const data = await response.json();
        setJsonData(data);
      } catch (error) {
        console.error('Error loading JSON file:', error);
      } finally {
        setLoading(false);
      }
    };
    
    loadData();
  }, []);
  
  const handleFileLoad = (data: CharacterData) => {
    setJsonData(data);
    setLoading(false);
  };
  
  if (loading) return <div>Loading...</div>;
  
  if (!jsonData) return (
    <>
      <Header onFileLoad={handleFileLoad}/>
      
      <Footer/>
    </>
  );
  
  
  return (
      <>
        <Main jsonData={jsonData}/>
        
        <Footer/>
      </>
  )
}

export default App
