import React from "react";
import "../../styles/mapControls.css";

function getCurrentTheme() {
  if (typeof window === "undefined") return "blue";

  try {
    const saved = window.localStorage.getItem("sociowire:theme");
    if (saved === "dark" || saved === "blue" || saved === "light") {
      return saved;
    }
  } catch {
    // tant pis
  }
  return "blue";
}

export default function MapControls({ onMySpot, onPostWire }) {
  const theme = getCurrentTheme();

  return (
    <div className={`map-controls map-controls--${theme}`}>
      <button
        type="button"
        className="map-controls__button map-controls__button--myspot"
        onClick={onMySpot}
      >
        My spot
      </button>

      <button
        type="button"
        className="map-controls__button map-controls__button--wire"
        onClick={onPostWire}
      >
        Put a wire
      </button>
    </div>
  );
}