'use client';

import React from 'react';
import dynamic from 'next/dynamic';

const LeafletMap = dynamic(() => import('@/components/LeafletMap'), {
  ssr: false,
  loading: () => (
    <div className="h-full w-full bg-neutral-medium flex items-center justify-center">
      <div className="animate-pulse text-primary font-medium">Loading Map...</div>
    </div>
  ),
});

interface ContactMapProps {
  address?: string;
  lat?: number;
  lng?: number;
  locations?: Array<{name: string, address: string, lat: number, lng: number}>;
}

export default function ContactMap({ address, lat, lng, locations }: ContactMapProps) {
  const mapLocations = locations || (address && lat && lng ? [{ name: 'E-TIB Gruppe', address, lat, lng }] : []);
  return <LeafletMap locations={mapLocations} />;
}