"use client";

/**
 * Figma: "Section / Logo Wall" (18483:18425)
 * Home uses the three pilot marks (street medics, Food Not Bombs, Mutual Aid Colorado).
 */

import { memo, useMemo } from "react";
import { useTranslation } from "../../../contexts/MessagesContext";
import { getAssetPath, partnerLogoPath } from "../../../../lib/assetUtils";
import LogoWallView from "./LogoWall.view";
import type { LogoWallProps } from "./LogoWall.types";

const LogoWallContainer = memo<LogoWallProps>(({ logos, className = "" }) => {
  const t = useTranslation("logoWall");

  const defaultLogos = useMemo(
    () => [
      {
        src: getAssetPath(partnerLogoPath("boulder-street-medics")),
        alt: t("partners.boulderStreetMedics"),
        size: "h-[48px] lg:h-[60px] xl:h-[74.6px]",
      },
      {
        src: getAssetPath(partnerLogoPath("food-not-bombs")),
        alt: t("partners.foodNotBombs"),
        size: "h-[48px] lg:h-[60px] xl:h-[74.6px]",
      },
      {
        src: getAssetPath(partnerLogoPath("mutual-aid-co")),
        alt: t("partners.mutualAidCo"),
        size: "h-[51.1px] lg:h-[63.6px] xl:h-[79.5px]",
      },
    ],
    [t],
  );

  const displayLogos = useMemo(
    () => (logos && logos.length > 0 ? logos : defaultLogos),
    [logos, defaultLogos],
  );

  return (
    <LogoWallView displayLogos={displayLogos} className={className} />
  );
});

LogoWallContainer.displayName = "LogoWall";

export default LogoWallContainer;