"use client";
import { MapContainer, TileLayer, Marker, Popup } from "react-leaflet";
import L from "leaflet";
import "leaflet/dist/leaflet.css";
import { PublicOrganizationView } from "@core/Models/Company.model";

export interface LocationMapProps {
    position: [number, number];
    orgData: PublicOrganizationView;
    width?: string;
    height?: string;
}

export default function LocationMap(props: LocationMapProps) {
    const { position } = props;
    const defaultIcon = L.icon({
        iconUrl: "/location.png",
        iconSize: [32, 48], // Tamaño del icono
        iconAnchor: [16, 48], // Punto de anclaje del icono
        popupAnchor: [1, -34], // Punto del popup respecto al icono
        shadowSize: [0, 0], // Tamaño de la sombra
    });
    return (
        <MapContainer
            center={position}
            zoom={12}
            style={{
                width: props.width || "100%",
                height: props.height || "250px",
                borderRadius: "5px",
                zIndex: 0
            }}
        >
            <TileLayer url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png" />
            <Marker position={position} icon={defaultIcon}>
                <Popup>
                    <h4>{props.orgData.name}</h4>
                    <br /> {props.orgData.description}
                </Popup>
            </Marker>
        </MapContainer>
    );
}
