shoc-frontend-new/src/app/(protected)/locations/_components/site-map-preview.tsx

import { Box, Typography } from "@mui/material";
import type { Location } from "@/domain/locations/types/location";
import { buildSiteMapEmbedUrl, hasCompleteSiteAddress } from "@/domain/locations/utils/site-maps";

type SiteMapPreviewProps = Pick<Location, "address" | "city" | "state" | "zipCode">;

/** Read-only key-less Google Maps embed; a placeholder until Street, City and State are set. */
export function SiteMapPreview(props: SiteMapPreviewProps) {
  const complete = hasCompleteSiteAddress(props);

  return (
    <Box>
      <Typography variant="caption" sx={{ color: "text.secondary" }}>
        Location preview
      </Typography>
      {complete && (
        <Box
          component="iframe"
          title="Site location map"
          src={buildSiteMapEmbedUrl(props)}
          loading="lazy"
          referrerPolicy="no-referrer-when-downgrade"
          className="mt-1 block w-full rounded border-0"
          sx={{ height: 140 }}
        />
      )}
      {!complete && (
        <Box
          className="mt-1 flex items-center justify-center rounded border border-dashed"
          sx={{ height: 140, borderColor: "divider" }}
        >
          <Typography variant="body2" sx={{ color: "text.secondary" }}>
            Enter an address to preview the location
          </Typography>
        </Box>
      )}
    </Box>
  );
}