"use client";

import { useState } from "react";
import { Map, MapPopup } from "@/components/ui/map";
import { Button } from "@/oss/components/ui/animated/button";

export function StandalonePopupExample() {
  const [showPopup, setShowPopup] = useState(true);

  return (
    <div className="h-100 w-full relative overflow-hidden rounded-lg">
      <Map center={[-74.006, 40.7128]} zoom={13}>
        {showPopup && (
          <MapPopup
            longitude={-74.006}
            latitude={40.7128}
            onClose={() => setShowPopup(false)}
            closeButton
            focusAfterOpen={false}
            closeOnClick={false}
            className="w-52"
          >
            <div className="space-y-1.5">
              <h3 className="text-sm font-medium text-foreground">
                New York City
              </h3>
              <p className="text-xs text-muted-foreground leading-relaxed">
                The city that never sleeps.
                <br />
                Population: 8.3M
              </p>
            </div>
          </MapPopup>
        )}
      </Map>

      {!showPopup && (
        <div className="absolute inset-x-0 bottom-4 flex justify-center z-20">
          <Button size="sm" onClick={() => setShowPopup(true)}>
            Show Popup
          </Button>
        </div>
      )}
    </div>
  );
}
Standalone Popups

Standalone Popups
