"use client";

/**
 * Figma: "Section / Feature-Grid" (18632:10668)
 */

import { memo, useMemo } from "react";
import { featureIconPath, getAssetPath } from "../../../../lib/assetUtils";
import { useTranslation } from "../../../contexts/MessagesContext";
import FeatureGridView from "./FeatureGrid.view";
import type { FeatureGridProps, Feature } from "./FeatureGrid.types";

const FeatureGridContainer = memo<FeatureGridProps>(
  ({ title, subtitle, className = "" }) => {
    const t = useTranslation();

    const features: Feature[] = useMemo(
      () => [
        {
          backgroundColor: "bg-[var(--color-surface-invert-brand-lavender)]",
          title: t("pages.home.featureGrid.features.decisionMaking.title"),
          description: t(
            "pages.home.featureGrid.features.decisionMaking.description",
          ),
          descriptionClassName: "text-[#3a3273]",
          iconSrc: getAssetPath(featureIconPath("git-branch")),
        },
        {
          backgroundColor: "bg-[var(--color-surface-invert-brand-lime)]",
          title: t("pages.home.featureGrid.features.valuesAlignment.title"),
          description: t(
            "pages.home.featureGrid.features.valuesAlignment.description",
          ),
          descriptionClassName: "text-[#424f1a]",
          iconSrc: getAssetPath(featureIconPath("arrow-left-right")),
        },
        {
          backgroundColor: "bg-[var(--color-surface-invert-brand-rust)]",
          title: t("pages.home.featureGrid.features.membershipGuidance.title"),
          description: t(
            "pages.home.featureGrid.features.membershipGuidance.description",
          ),
          descriptionClassName: "text-[#5e2e23]",
          iconSrc: getAssetPath(featureIconPath("door-open")),
        },
        {
          backgroundColor: "bg-[var(--color-surface-invert-brand-teal)]",
          title: t("pages.home.featureGrid.features.conflictResolution.title"),
          description: t(
            "pages.home.featureGrid.features.conflictResolution.description",
          ),
          descriptionClassName: "text-[#1f4d47]",
          iconSrc: getAssetPath(featureIconPath("message-square-share")),
        },
      ],
      [t],
    );

    const labelledBy = title ? "feature-grid-headline" : undefined;

    return (
      <FeatureGridView
        title={title}
        subtitle={subtitle}
        className={className}
        features={features}
        labelledBy={labelledBy}
      />
    );
  },
);

FeatureGridContainer.displayName = "FeatureGrid";

export default FeatureGridContainer;