'use client'

import { useEffect, useRef } from 'react'
import L from 'leaflet'

export function CraftsmanDetailMap({ lat, lng, name }: { lat: number; lng: number; name: string }) {
  const ref = useRef<HTMLDivElement>(null)

  useEffect(() => {
    if (!ref.current) return
    const map = L.map(ref.current, { zoomControl: false }).setView([lat, lng], 13)
    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
      attribution: '© OpenStreetMap',
      maxZoom: 18,
    }).addTo(map)
    L.marker([lat, lng]).addTo(map).bindPopup(name)
    return () => { map.remove() }
  }, [lat, lng, name])

  return <div ref={ref} className="h-48 rounded-xl border overflow-hidden" style={{ direction: 'ltr' }} />
}