"use client";

import { useState } from "react";

import dynamic from "next/dynamic";

const IntelMap = dynamic(() => import("@/components/IntelMap"), { ssr: false,

  loading: () => <div className="card muted">Loading map…</div> });

const OPS = ["", "Flock Safety", "Motorola Solutions", "Genetec", "Police"];

export default function MapPage() {

  const [op, setOp] = useState("");

  return (

    <div>

      <h1>Live Map</h1>

      <p className="sub">Real ALPR/Flock camera network (OSM/DeFlock) + live imaging-satellite positions.</p>

      <div className="row" style={{ margin: "10px 0" }}>

        {OPS.map((o) => (

          <span key={o} className={"chip " + (op === o ? "on" : "")} onClick={() => setOp(o)}>

            {o || "All operators"}

          </span>

        ))}

      </div>

      <IntelMap operatorFilter={op || undefined} />

    </div>

  );

}