"use client";

interface Props {
  active: boolean;
  onClick: () => void;
}

/**
 * Floating button shown below the map to toggle "add custom POI" click mode.
 * When active, cursor becomes crosshair and next map click opens the add modal.
 */
export function CustomPoiToggleButton({ active, onClick }: Props) {
  return (
    <button
      type="button"
      onClick={onClick}
      style={{
        padding: "7px 14px",
        fontSize: 13,
        fontWeight: 600,
        borderRadius: 8,
        border: active ? "2px solid #1d4ed8" : "1px solid #d1d5db",
        background: active ? "#dbeafe" : "#fff",
        color: active ? "#1d4ed8" : "#374151",
        cursor: "pointer",
        transition: "all 0.15s",
        whiteSpace: "nowrap",
      }}
      title={
        active
          ? "Кликните на карте для добавления точки. Нажмите снова для отмены"
          : "Кликните для добавления пользовательской точки на карте"
      }
    >
      {active ? "Отмена (нажмите Esc или эту кнопку)" : "+ Добавить точку"}
    </button>
  );
}