/**
 * React version of the Multi-Cloud Orchestration Portal
 * Alternative to Vue implementation
 */

import React, { useState, useEffect } from 'react';
import { BrowserRouter, Routes, Route, Link } from 'react-router-dom';
import Dashboard from './views/Dashboard';
import HealthDashboard from './views/HealthDashboard';
import CostDashboard from './views/CostDashboard';
import AdminPanel from './views/AdminPanel';
import MonitoringDashboard from './views/MonitoringDashboard';
import type { Environment, DeploymentStatus, Alert } from '../types';

function App() {
  return (
    <BrowserRouter>
      <div className="min-h-screen bg-gray-50">
        {/* Navigation */}
        <nav className="bg-gradient-to-r from-primary-500 to-purple-600 text-white shadow-lg">
          <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div className="flex justify-between items-center h-16">
              <div className="flex items-center">
                <h1 className="text-2xl font-bold">
                  <i className="fas fa-cloud mr-2"></i>
                  Multi-Cloud Orchestration
                </h1>
              </div>
              <div className="flex gap-6">
                <Link to="/" className="hover:opacity-80 transition-opacity">
                  <i className="fas fa-home mr-1"></i> Dashboard
                </Link>
                <Link to="/health" className="hover:opacity-80 transition-opacity">
                  <i className="fas fa-heartbeat mr-1"></i> Health
                </Link>
                <Link to="/costs" className="hover:opacity-80 transition-opacity">
                  <i className="fas fa-dollar-sign mr-1"></i> Costs
                </Link>
                <Link to="/admin" className="hover:opacity-80 transition-opacity">
                  <i className="fas fa-cog mr-1"></i> Admin
                </Link>
              </div>
            </div>
          </div>
        </nav>

        {/* Main Content */}
        <main className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
          <Routes>
            <Route path="/" element={<Dashboard />} />
            <Route path="/health" element={<HealthDashboard />} />
            <Route path="/costs" element={<CostDashboard />} />
            <Route path="/admin" element={<AdminPanel />} />
          </Routes>
        </main>
      </div>
    </BrowserRouter>
  );
}

export default App;

