import type { RefObject } from "react";

import { useTranslation } from "react-i18next";

import { cn } from "@/lib/utils";

interface MapViewportProps {
  containerRef: RefObject<HTMLDivElement | null>;
  isPosting: boolean;
  isLoading: boolean;
  confirmationHint?: string | null;
  className?: string;
}

export function MapViewport({ containerRef, isPosting, isLoading, confirmationHint, className }: MapViewportProps) {
  const { t } = useTranslation();

  return (
    <div className={cn("relative h-full min-h-screen w-full overflow-hidden bg-muted/40 shadow-inner", className)}>
      <div ref={containerRef} className={cn("absolute inset-0 z-0", "leaflet-wrapper")} />
      {(isPosting || isLoading) && (
        <div className="pointer-events-none absolute inset-0 z-20 flex items-center justify-center">
          <span className="rounded-full border border-border/60 bg-background/80 px-4 py-2 text-xs font-medium uppercase tracking-wide text-muted-foreground backdrop-blur">
            {isPosting ? t("map.posting") : t("map.loading")}
          </span>
        </div>
      )}
      {confirmationHint && (
        <div className="pointer-events-none absolute bottom-6 left-1/2 z-20 w-[90%] max-w-sm -translate-x-1/2 rounded-full border border-border/70 bg-background/90 px-4 py-2 text-xs text-muted-foreground shadow-sm">
          {confirmationHint}
        </div>
      )}
    </div>
  );
}
