/**
 * Get the user's current location using the browser's geolocation API.
 * @returns {Promise<{ latitude: number, longitude: number }>} The current position { latitude, longitude }.
 */
export async function get_location() {
  return new Promise((resolve, reject) => {
    if (!navigator.geolocation) {
      reject("Geolocation not supported.");
      return;
    }
    navigator.geolocation.getCurrentPosition(
      (pos) =>
        resolve({
          latitude: pos.coords.latitude,
          longitude: pos.coords.longitude,
        }),
      (err) => reject(err.message || "Geolocation error"),
    );
  });
}

export default (input, output) =>
  React.createElement(
    "div",
    { className: "bg-green-50 border border-green-200 rounded-lg p-4" },
    React.createElement(
      "div",
      { className: "flex items-center mb-2" },
      React.createElement(
        "div",
        {
          className:
            "w-8 h-8 bg-green-100 rounded-full flex items-center justify-center mr-3",
        },
        "📍",
      ),
      React.createElement(
        "h3",
        { className: "text-green-900 font-semibold" },
        "Location",
      ),
    ),
    output?.latitude && output?.longitude
      ? React.createElement(
          "div",
          { className: "space-y-1 text-sm" },
          React.createElement(
            "p",
            { className: "text-green-700" },
            React.createElement(
              "span",
              { className: "font-medium" },
              "Latitude: ",
            ),
            output.latitude.toFixed(6),
          ),
          React.createElement(
            "p",
            { className: "text-green-700" },
            React.createElement(
              "span",
              { className: "font-medium" },
              "Longitude: ",
            ),
            output.longitude.toFixed(6),
          ),
          React.createElement(
            "a",
            {
              href: `https://maps.google.com?q=${output.latitude},${output.longitude}`,
              target: "_blank",
              rel: "noopener noreferrer",
              className:
                "inline-block mt-2 text-green-600 hover:text-green-800 underline text-xs",
            },
            "View on Google Maps",
          ),
        )
      : React.createElement(
          "p",
          { className: "text-green-700 text-sm" },
          JSON.stringify(output),
        ),
  );