community-rule/app/components/ContentContainer.tsx

"use client";

import React, { memo } from "react";
import { getAssetPath, ASSETS } from "../../lib/assetUtils";
import type { BlogPost } from "../../lib/content";

interface ContentContainerProps {
  post: BlogPost;
  width?: string;
  size?: "xs" | "responsive";
}

const ContentContainer = memo<ContentContainerProps>(
  ({ post, width = "200px", size = "responsive" }) => {
    // Get the corresponding icon based on the same logic as background images
    const getIconImage = (slug: string): string => {
      const icons = [
        getAssetPath(ASSETS.ICON_1),
        getAssetPath(ASSETS.ICON_2),
        getAssetPath(ASSETS.ICON_3),
      ];

      if (!slug) return icons[0];

      // Use the same cycling logic as background images to ensure matching
      const slugOrder = [
        "building-community-trust",
        "operational-security-mutual-aid",
        "making-decisions-without-hierarchy",
        "resolving-active-conflicts",
      ];
      const index = slugOrder.indexOf(slug);
      const finalIndex = index >= 0 ? index % icons.length : 0;
      return icons[finalIndex];
    };

    const iconImage = getIconImage(post.slug);

    // Choose styling based on size prop
    const containerClasses =
      size === "xs"
        ? "relative z-20 h-full flex flex-col gap-[var(--measures-spacing-012)]"
        : "relative z-20 h-full flex flex-col gap-[var(--measures-spacing-012)] sm:gap-[var(--measures-spacing-016)] md:gap-[18px] lg:gap-[var(--measures-spacing-024)]";

    return (
      <div
        className={`${containerClasses} ${
          size === "responsive"
            ? "max-w-[298px] sm:max-w-[479px] lg:max-w-[365px] xl:max-w-[623px]"
            : ""
        }`}
        style={size === "responsive" ? {} : { width }}
      >
        {/* Content Container - gap between icon and text */}
        <div
          className={
            size === "xs"
              ? "flex flex-col gap-[var(--measures-spacing-008)]"
              : "flex flex-col gap-[var(--measures-spacing-008)] sm:gap-[var(--measures-spacing-012)] md:gap-[var(--measures-spacing-008)] lg:gap-[var(--measures-spacing-016)] xl:gap-[var(--measures-spacing-004)]"
          }
        >
          {/* Icon */}
          <div className="w-[60px] h-[30px] flex items-center justify-center">
            {/* eslint-disable-next-line @next/next/no-img-element */}
            <img
              src={iconImage}
              alt={`Icon for ${post.frontmatter.title}`}
              className="w-[60px] h-[30px] object-contain"
            />
          </div>

          {/* Text Container */}
          <div
            className={
              size === "xs"
                ? "flex flex-col gap-[var(--measures-spacing-004)]"
                : "flex flex-col gap-[var(--measures-spacing-004)] md:gap-[var(--measures-spacing-002)] lg:gap-[var(--measures-spacing-004)]"
            }
          >
            {/* Title */}
            <h3
              className={
                size === "xs"
                  ? "font-bricolage font-medium text-[18px] leading-[120%] text-[var(--color-content-inverse-brand-royal)] group-hover:text-blue-200 transition-colors"
                  : "font-bricolage font-medium text-[18px] leading-[120%] sm:text-[24px] sm:leading-[24px] md:text-[32px] md:leading-[110%] lg:text-[44px] lg:leading-[110%] xl:text-[64px] xl:leading-[110%] text-[var(--color-content-inverse-brand-royal)] group-hover:text-blue-200 transition-colors"
              }
            >
              {post.frontmatter.title}
            </h3>

            {/* Description */}
            <p
              className={
                size === "xs"
                  ? "font-inter font-normal text-[12px] leading-[16px] text-[var(--color-content-inverse-brand-royal)] max-w-md"
                  : "font-inter font-normal text-[12px] leading-[16px] sm:text-[14px] sm:leading-[20px] md:text-[14px] md:leading-[20px] lg:text-[18px] lg:leading-[130%] xl:text-[24px] xl:leading-[32px] text-[var(--color-content-inverse-brand-royal)]"
              }
            >
              {post.frontmatter.description}
            </p>
          </div>
        </div>

        {/* Metadata Container - horizontal with 8px gap */}
        <div className="flex items-center gap-[var(--measures-spacing-008)]">
          {/* Author Name */}
          <span
            className={
              size === "xs"
                ? "font-inter font-normal text-[10px] leading-[14px] text-[var(--color-content-inverse-brand-royal)]"
                : "font-inter font-normal text-[10px] leading-[14px] md:text-[12px] md:leading-[16px] lg:text-[14px] lg:leading-[20px] xl:text-[18px] xl:leading-[130%] text-[var(--color-content-inverse-brand-royal)]"
            }
          >
            {post.frontmatter.author}
          </span>

          {/* Date */}
          <span
            className={
              size === "xs"
                ? "font-inter font-normal text-[10px] leading-[14px] text-[var(--color-content-inverse-brand-royal)]"
                : "font-inter font-normal text-[10px] leading-[14px] md:text-[12px] md:leading-[16px] lg:text-[14px] lg:leading-[20px] xl:text-[18px] xl:leading-[130%] text-[var(--color-content-inverse-brand-royal)]"
            }
          >
            {new Date(post.frontmatter.date).toLocaleDateString("en-US", {
              year: "numeric",
              month: "long",
            })}
          </span>
        </div>
      </div>
    );
  },
);

ContentContainer.displayName = "ContentContainer";

export default ContentContainer;