import React from "react";
import { useTranslation } from "react-i18next";
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 { t } = useTranslation();
  const theme = getCurrentTheme();

  return (
    <div className={`map-controls map-controls--${theme}`}>
      <button
        type="button"
        className="map-controls__button map-controls__button--myspot"
        onClick={onMySpot}
      >
        {t('controls.mySpot')}
      </button>

      <button
        type="button"
        className="map-controls__button map-controls__button--wire"
        onClick={onPostWire}
      >
        {t('controls.putWire')}
      </button>
    </div>
  );
}
