import { useEffect } from 'react';
import { Layout } from './components/Layout';
import { useWindStore } from './store/windStore';
import { WindParametersInput } from './components/inputs/WindParametersInput';
import { GeometryInput } from './components/inputs/GeometryInput';
import { ResultsSummary } from './components/results/ResultsSummary';
import { BuildingGeometryDiagram } from './components/diagrams/BuildingGeometryDiagram';
import { LoadCaseDiagrams } from './components/diagrams/LoadCaseDiagrams';
import { ComponentsCladdingDiagrams } from './components/diagrams/ComponentsCladdingDiagrams';
import './App.css';

function App() {
    const { calculate } = useWindStore();

    useEffect(() => {
        calculate();
    }, [calculate]);

    return (
        <Layout>
            <div className="app-container">
                <div className="input-panel">
                    <WindParametersInput />
                    <GeometryInput />
                    <BuildingGeometryDiagram />
                    <LoadCaseDiagrams />
                    <ComponentsCladdingDiagrams />
                </div>
                <div className="results-panel">
                    <ResultsSummary />
                </div>
            </div>
        </Layout>
    );
}

export default App;