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

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

  return (
    <div className="app">
      <TimelineSlider activeStep={activeStep} onChange={setActiveStep} />

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

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