"use client";

import { useTranslation } from "../../../contexts/MessagesContext";
import ContentLockup from "../../type/ContentLockup";
import type { FeatureGridViewProps } from "./FeatureGrid.types";

/** Figma **Section / Feature-Grid** [18632:10668](https://www.figma.com/design/agv0VBLiBlcnSAaiAORgPR/Community-Rule-System?node-id=18632-10668&m=dev). */
function FeatureGridView({
  title,
  subtitle,
  className = "",
  features,
  labelledBy,
}: FeatureGridViewProps) {
  const t = useTranslation();
  const ariaLabel = t("featureGrid.ariaLabel");
  const linkText = t("featureGrid.linkText");
  const linkHref = t("featureGrid.linkHref");

  return (
    <section
      className={`p-0 md:px-[var(--spacing-scale-024)] lg:p-[var(--spacing-scale-064)] ${className}`}
      aria-labelledby={labelledBy}
      aria-label={labelledBy ? undefined : ariaLabel}
    >
      <div
        data-figma-node="18632-10668"
        className="rounded-none bg-[var(--color-surface-default-secondary)] px-[var(--spacing-scale-016)] py-[var(--spacing-scale-032)] md:rounded-[var(--radius-measures-radius-large)] md:p-[var(--spacing-scale-048)] lg:p-[var(--spacing-scale-064)]"
      >
        <div className="mx-auto flex w-full flex-col gap-[var(--spacing-scale-040)] md:gap-[var(--spacing-scale-048)] lg:flex-row lg:items-center lg:gap-[var(--spacing-scale-064)]">
          <div className="lg:min-w-0 lg:flex-1">
            <ContentLockup
              title={title}
              subtitle={subtitle}
              variant="feature"
              linkText={linkText}
              linkHref={linkHref}
              titleId={labelledBy}
            />
          </div>

          <div className="grid w-full grid-cols-1 gap-[var(--spacing-scale-008)] md:grid-cols-2 md:gap-[var(--spacing-scale-016)] lg:flex-1">
            {features.map((feature) => (
              <div
                key={feature.title}
                className={`flex flex-col gap-[var(--spacing-scale-016)] p-[var(--spacing-scale-024)] ${feature.backgroundColor} rounded-[var(--radius-200)] md:rounded-[var(--radius-400)] lg:rounded-[var(--radius-measures-radius-large)]`}
              >
                <div className="size-[40px] shrink-0 overflow-clip">
                  {/* eslint-disable-next-line @next/next/no-img-element -- decorative Figma glyph */}
                  <img
                    src={feature.iconSrc}
                    alt=""
                    width={40}
                    height={40}
                    className="size-full object-contain"
                    role="presentation"
                  />
                </div>
                <div className="flex w-full flex-col gap-[var(--spacing-scale-008)]">
                  <p className="font-semibold text-[17px] leading-[22px] text-[var(--color-content-inverse-primary)]">
                    {feature.title}
                  </p>
                  <p
                    className={`text-small-paragraph ${feature.descriptionClassName}`}
                  >
                    {feature.description}
                  </p>
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

export default FeatureGridView;