import { useState } from 'react';
import SargassesMap from './components/Map/SargassesMap';
import SpotPanel from './components/SpotPanel/SpotPanel';
import Topbar from './components/Topbar/Topbar';
import Legend from './components/Legend/Legend';
import './App.css';

export default function App() {
  const [selectedSpot, setSelectedSpot] = useState(null);
  const [activeStep,   setActiveStep]   = useState('now');
  const [flyToTarget,  setFlyToTarget]  = useState(null);

  return (
    <div className="app">
      <Topbar
        activeStep={activeStep}
        onStepChange={setActiveStep}
        onIslandSelect={setFlyToTarget}
      />

      <div className="app__wave-overlay" aria-hidden="true" />

      <SargassesMap
        onSpotSelect={setSelectedSpot}
        selectedSpotId={selectedSpot?.id}
        activeStep={activeStep}
        flyToTarget={flyToTarget}
      />

      <Legend />

      <SpotPanel
        spot={selectedSpot}
        activeStep={activeStep}
        onClose={() => setSelectedSpot(null)}
      />
    </div>
  );
}
