import MasonryGallery from "@/sections/portfolioGallery";
import { getStrapiImageUrl } from "@/utils/getStrapiUrl";
import type { PropertyData, PortfolioImage } from "@/utils/strapi";

interface PropertyPortfolioGalleryProps {
  propertyData: PropertyData | null;
}

const PropertyPortfolioGallery = ({
  propertyData,
}: PropertyPortfolioGalleryProps) => {
  // Helper function to get image URL
  const getImageUrl = (imageData: any) => {
    if (!imageData) return "";
    const imageUrl = imageData.url || imageData.data?.attributes?.url;
    if (!imageUrl) return "";
    return getStrapiImageUrl(imageUrl) || "";
  };

  // Convert PropertyPortfolioImage[] to PortfolioImage[] format
  const portfolioImages: PortfolioImage[] =
    propertyData?.portfolioImages?.map((item) => ({
      image: item.image
        ? {
            url: getImageUrl(item.image),
            data: item.image.data || {
              attributes: {
                url: getImageUrl(item.image),
                alternativeText:
                  item.image.alternativeText ||
                  item.image.data?.attributes?.alternativeText,
              },
            },
          }
        : undefined,
    })) || [];

  if (portfolioImages.length === 0) {
    return null;
  }

  return <MasonryGallery images={portfolioImages} />;
};

export default PropertyPortfolioGallery;