starr-philproperties/src/components/generic/Blocks/Client/ImageBlock.jsx

import { ImageIcon } from "lucide-react";
import { ZoomableImage } from "@/modules/admin/components/courses/LessonsPreview";
import { useAssetPreviewSrc } from "@/hooks/useAssetPreviewSrc";
import { MediaFallback } from "@/components/generic/MediaFallback";

// content shape: { asset_id?, url?, storage_provider?, alt? }
//
// url is redacted (null) server-side for S3 assets — see redactS3Url() in
// controllers/admin/assets.controller.js. Resolve through useAssetPreviewSrc
// (media.util.js) instead of reading content.url directly, so S3-backed
// images re-mint a fresh stream token/thumbnail at render time.
export function ImageBlock({ content }) {
    const { src, loading } = useAssetPreviewSrc(
        { asset_id: content?.asset_id, storage_provider: content?.storage_provider, file_url: content?.url, thumbnail_url: content?.url },
        { scope: "client" },
    );

    if (loading) {
        return <MediaFallback className="aspect-video rounded-lg" />;
    }

    if (!src) {
        return (
            <div className="flex items-center justify-center aspect-video rounded-lg border border-dashed text-xs text-muted-foreground bg-muted/20 gap-1.5">
                <ImageIcon className="h-4 w-4" />
                No image
            </div>
        );
    }

    return <ZoomableImage url={src} alt={content?.alt} />;
}