"use client";

import React from "react";
import { YMaps, Map, Placemark, ZoomControl, TypeSelector, FullscreenControl } from "@pbe/react-yandex-maps";

export default function YandexMap() {
  const location = { lat: 41.3111, lng: 69.2406 };

  return (
    <div className="w-full h-[500px] overflow-hidden rounded-lg shadow-md">
      <YMaps query={{ apikey: '5169ae9d-529a-43f8-9cb1-30e1a3360dac' }}>
        <Map
          defaultState={{
            center: [location.lat, location.lng],
            zoom: 12,
            controls: ["zoomControl", "typeSelector", "fullscreenControl"], // control'larni shu yerda qo‘shamiz
          }}
          width="100%"
          height="500px"
          modules={[
            "control.ZoomControl",
            "control.TypeSelector",
            "control.FullscreenControl",
            "geoObject.addon.balloon",
          ]}
        >
          <Placemark
            geometry={[location.lat, location.lng]}
            properties={{
              balloonContent: `
                <div style="font-size:14px">
                  <b>Bizning joylashuv:</b><br/>
                  Toshkent sh., Mustaqillik maydoni<br/>
                  <a href="https://yandex.uz/maps/?ll=${location.lng}%2C${location.lat}&z=14" target="_blank">Yandex xaritada ochish</a>
                </div>
              `,
            }}
            options={{
              iconColor: "#ff0000",
              draggable: false,
            }}
          />
        </Map>
      </YMaps>
    </div>
  );
}