'use client';

import { useEffect, useRef } from 'react';
import styles from './YandexMap.module.css';

export default function YandexMap() {
  const mapRef = useRef<HTMLDivElement>(null);
  const scriptLoadedRef = useRef(false);

  useEffect(() => {
    if (!mapRef.current || scriptLoadedRef.current) return;

    // Очистка предыдущего содержимого
    mapRef.current.innerHTML = '';

    // Создание скрипта конструктора карт
    const script = document.createElement('script');
    script.type = 'text/javascript';
    script.charset = 'utf-8';
    script.async = true;
    script.src =
      'https://api-maps.yandex.ru/services/constructor/1.0/js/?um=constructor%3Ade579bce5d153a77c904d2d713e051548ffef8ef516c10078f5ac83e53d5872a&width=1200&height=500&lang=ru_RU&scroll=true';

    // Добавляем скрипт в контейнер карты (конструктор создаст iframe в этом контейнере)
    mapRef.current.appendChild(script);
    scriptLoadedRef.current = true;

    return () => {
      // Очистка при размонтировании
      if (mapRef.current) {
        mapRef.current.innerHTML = '';
        scriptLoadedRef.current = false;
      }
    };
  }, []);

  return (
    <div className={styles.mapContainer}>
      <div ref={mapRef} className={styles.map} id="yandex-map" />
    </div>
  );
}

