"use client";
import React, { CSSProperties } from "react";
import { Loader2 } from "lucide-react";
import dynamic from "next/dynamic";
import type { MapProps } from "@/components/ui/map/map";

const Map = dynamic(() => import("@/components/ui/map/map").then(m => m.Map), {
    ssr: false,
    loading: () => {
        return (
            <div className="flex size-full items-center justify-center bg-gray-200 text-neutral-600">
                <Loader2 className="animate-spin md:size-10" />
            </div>
        );
    }
});

type MapContainerProps = MapProps & {
    size?: number | string;
    width?: number | string;
    height?: number | string;
};

export const MapContainer: React.FC<MapContainerProps> = (props) => {
    const {
        size = "100%",
        width = size as number | string,
        height = size as number | string,
        ...rest
    } = props;

    return (
        <div
          style={{
            "--map-width": typeof width === "number" ? `${width}px` : width,
            "--map-height": typeof height === "number" ? `${height}px` : height,
          } as CSSProperties}
          className="relative w-[var(--map-width)] h-[var(--map-height)]">
            <Map {...rest} />
        </div>
    );
};

export const MapMarker = dynamic(() => import("@/components/ui/map/map-marker").then(m => m.MapMarker), {
    ssr: false
});

export const MapEvents = dynamic(() => import("@/components/ui/map/map-events").then(m => m.MapEvents), {
    ssr: false
});