community-rule/app/components/sections/LogoWall/LogoWall.view.tsx

"use client";

import { memo } from "react";
import Image from "next/image";
import type { LogoWallViewProps } from "./LogoWall.types";

function LogoWallView({
  heading,
  displayLogos,
  className,
}: LogoWallViewProps) {
  return (
    <section
      className={`bg-[var(--color-surface-default-primary)] p-[var(--spacing-scale-032)] md:px-[var(--spacing-scale-024)] md:py-[var(--spacing-scale-032)] lg:px-[var(--spacing-scale-064)] lg:py-[var(--spacing-scale-048)] xl:px-[160px] xl:py-[var(--spacing-scale-064)] ${className}`}
    >
      <div className="flex flex-col items-center gap-[var(--spacing-scale-032)] md:gap-[var(--spacing-scale-024)] xl:gap-[var(--spacing-scale-032)]">
        <p className="font-inter text-center text-[10px] font-medium uppercase leading-[12px] text-[var(--color-content-default-primary)] xl:text-[14px] xl:leading-[12px]">
          {heading}
        </p>
        <div className="w-full opacity-60">
          <div className="grid grid-cols-2 grid-rows-3 sm:grid-cols-3 sm:grid-rows-2 md:flex md:w-full md:flex-nowrap md:items-center md:justify-between gap-[38.4px] lg:gap-[var(--spacing-scale-048)]">
            {displayLogos.map((logo, index) => (
              <div
                key={index}
                className={`flex items-center justify-center md:shrink-0 ${
                  logo.order || ""
                }`}
              >
                <Image
                  src={logo.src}
                  alt={logo.alt}
                  className={`${logo.size || "h-8"} w-auto object-contain`}
                  priority={index < 2} // Prioritize first 2 logos for above-the-fold loading
                  unoptimized // Skip optimization for local images
                  width={0}
                  height={0}
                  sizes="100vw"
                />
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

LogoWallView.displayName = "LogoWallView";

export default memo(LogoWallView);