import type { MutableRefObject } from 'react'
import { useTranslation } from 'react-i18next'

import { cn } from '@/lib/utils'

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

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

  return (
    <div className="relative min-h-[360px] flex-1 overflow-hidden rounded-3xl border border-border/50 bg-muted/40 shadow-inner">
      <div ref={containerRef} className={cn('absolute inset-0 z-0', 'leaflet-wrapper')} />
      <div className="pointer-events-none absolute inset-x-0 top-0 z-10 h-24 bg-gradient-to-b from-background/70 to-transparent" />
      <div className="pointer-events-none absolute inset-x-0 bottom-0 z-10 h-24 bg-gradient-to-t from-background/70 to-transparent" />
      {(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>
  )
}