import { MapPin, ExternalLink } from "lucide-react";
import { mapsSearchUrl, mapsEmbedUrl } from "@/lib/maps";

export function LocationMap({ address, className }: { address?: string | null; className?: string }) {
  if (!address) return null;
  return (
    <div className={className}>
      <div className="flex items-start justify-between gap-3">
        <p className="text-sm text-gray-700 flex items-start gap-1.5">
          <MapPin className="w-4 h-4 shrink-0 mt-0.5 text-gray-400" />
          <span>{address}</span>
        </p>
        <a
          href={mapsSearchUrl(address)}
          target="_blank"
          rel="noopener noreferrer"
          className="text-xs text-brand-600 hover:underline flex items-center gap-1 shrink-0 whitespace-nowrap"
        >
          Directions <ExternalLink className="w-3 h-3" />
        </a>
      </div>
      <div className="mt-2 rounded-lg overflow-hidden border">
        <iframe
          title={`Map showing ${address}`}
          src={mapsEmbedUrl(address)}
          className="w-full h-48 border-0"
          loading="lazy"
          referrerPolicy="no-referrer-when-downgrade"
        />
      </div>
    </div>
  );
}