地図の上の丸いボタンMapControlButtonExperimental

"use client";

import * as React from "react";
import { MapControlButton } from "@gunjo/ui";
import { IconCircleDot, IconMapPin, IconMinus, IconPlus } from "@tabler/icons-react";

export function MapColumn() {
  const [zoom, setZoom] = React.useState(3);
  const [following, setFollowing] = React.useState(false);
  const [status, setStatus] = React.useState<"idle" | "busy" | "error">("idle");
  const picked = null; // 地点を選ぶまでは null

  const locate = () => {
    if (following) return setFollowing(false);
    setStatus("busy");
    navigator.geolocation.getCurrentPosition(
      () => {
        setStatus("idle");
        setFollowing(true);
      },
      () => {
        setStatus("error");
        // 失敗の印は短く。消すのは呼び出し側です
        window.setTimeout(() => setStatus("idle"), 1600);
      },
    );
  };

  return (
    <div className="flex flex-col items-center gap-2">
      <MapControlButton label="拡大" onClick={() => setZoom(zoom + 1)}>
        <IconPlus />
      </MapControlButton>
      <MapControlButton label="縮小" onClick={() => setZoom(zoom - 1)}>
        <IconMinus />
      </MapControlButton>
      {/* 選んだ地点は ◎。現在地のピンと混ぜません */}
      <MapControlButton
        label="選んだ地点へ"
        disabled={picked === null}
        disabledReason="先に地図で地点を選んでください"
      >
        <IconCircleDot />
      </MapControlButton>
      <MapControlButton
        label="現在地へ"
        pressed={following}
        status={status}
        statusLabel={status === "busy" ? "現在地を取得しています" : "現在地を取得できませんでした"}
        onClick={locate}
      >
        <IconMapPin />
      </MapControlButton>
    </div>
  );
}