"use client";
import Image from "next/image";
import Link from "next/link";
import dynamic from "next/dynamic";
import MapPapper from "@/public/icons/map-paper.svg";
import ArrowUpLeft from "@/public/icons/arrow-up-left.svg";

// Dynamically import map
const InteractiveMap = dynamic(
  () => import("@/components/search-map/InteractiveMap"),
  { ssr: false }
);

interface ProjectLocationProps {
  title?: string;
  address?: string;
  latitude?: number;
  longitude?: number;
  propertyTitle?: string;
}

const ProjectLocation = ({
  title = "موقع المشروع",
  address = "شارع الملك فيصل",
  latitude,
  longitude,
  propertyTitle = "موقع العقار"
}: ProjectLocationProps) => {

  const mapItem = {
    id: 1,
    title: propertyTitle || "موقع العقار",
    latitude: latitude || 24.7136, // Fallback to Riyadh if missing
    longitude: longitude || 46.6753,
    type: 'project' as const
  };

  return (
    <div className="bg-[#F1F5F9] p-3 rounded-md">
      <h3 className="text-[#052531] font-bold text-md">{title}</h3>
      <p className="text-base mt-1 text-[#1D293D]">{address}</p>

      <div className="h-80 mt-6 relative rounded-md overflow-hidden border border-[#CAD5E2]">
        <InteractiveMap
          items={[mapItem]}
          selectedItem={mapItem}
          onSelectItem={() => { }}
          className="w-full h-full"
        />

        {/* Directions Buttons Overlay - Aligned with Original Design */}
        <div className="absolute top-4 left-4 right-4 z-[1000] flex justify-between pointer-events-none">
          <Link
            href={`https://www.google.com/maps/dir/?api=1&destination=${latitude},${longitude}`}
            target="_blank"
            className="flex items-center gap-2 py-2 px-3 bg-[#F8FAFCBF] hover:bg-[#F8FAFC] text-[#05222D] rounded-full font-normal text-sm shadow-sm pointer-events-auto backdrop-blur-sm"
          >
            الاتجاهات
            <Image src={MapPapper} alt="map" width={16} height={16} />
          </Link>

          <Link
            href={`https://www.google.com/maps/search/?api=1&query=${latitude},${longitude}`}
            target="_blank"
            className="flex items-center gap-2 py-2 px-3 bg-[#F8FAFCBF] hover:bg-[#F8FAFC] text-[#05222D] rounded-full font-normal text-sm shadow-sm pointer-events-auto backdrop-blur-sm"
          >
            فتح في خرائط google
            <Image src={ArrowUpLeft} alt="arrow-up-left" width={16} height={16} />
          </Link>
        </div>
      </div>
    </div>
  );
};

export default ProjectLocation;