import TimelineSlider from '../Timeline/TimelineSlider';
import './Topbar.css';

const ISLANDS = [
  { key: 'guadeloupe',   label: 'Guadeloupe',   center: [-61.55, 16.25], zoom: 9  },
  { key: 'martinique',   label: 'Martinique',   center: [-61.02, 14.65], zoom: 9  },
  { key: 'barbade',      label: 'Barbade',      center: [-59.55, 13.18], zoom: 10 },
  { key: 'saint-martin', label: 'St-Martin',    center: [-63.07, 18.07], zoom: 11 },
  { key: 'dominique',    label: 'Dominique',    center: [-61.37, 15.41], zoom: 10 },
];

export default function Topbar({ activeStep, onStepChange, onIslandSelect }) {
  return (
    <header className="topbar">
      <div className="topbar__brand">
        <span className="topbar__logo" aria-hidden="true">🌊</span>
        <span className="topbar__title">Radar Sargasses</span>
      </div>

      <nav className="topbar__islands" aria-label="Navigation par île">
        {ISLANDS.map(island => (
          <button
            key={island.key}
            className="topbar__island-btn"
            onClick={() => onIslandSelect({ center: island.center, zoom: island.zoom, _t: Date.now() })}
          >
            {island.label}
          </button>
        ))}
      </nav>

      <div className="topbar__timeline">
        <TimelineSlider activeStep={activeStep} onChange={onStepChange} />
      </div>
    </header>
  );
}
