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

"use client";

import { useTranslation } from "../../../contexts/MessagesContext";
import SectionHeader from "../../type/SectionHeader";
import Step from "../../cards/Step";
import Button from "../../buttons/Button";
import type { CardStepsViewProps } from "./CardSteps.types";

function CardStepsView({
  title,
  subtitle,
  steps,
  headingDesktopLines,
  seeHowItWorksHref,
  schemaJson,
}: CardStepsViewProps) {
  const t = useTranslation();

  return (
    <>
      <script
        type="application/ld+json"
        dangerouslySetInnerHTML={{ __html: schemaJson }}
      />
      <section className="bg-transparent py-[var(--space-800)] px-[var(--space-500)] sm:py-[var(--space-1200)] sm:px-[var(--space-800)] lg:py-[var(--space-1800)] lg:px-[var(--space-1800)] xl:py-[var(--space-2100)] xl:px-[var(--space-1800)]">
        <div className="max-w-[var(--spacing-measures-max-width-lg)] mx-auto">
          <div className="grid grid-cols-1 gap-y-[var(--space-600)] sm:gap-y-[var(--space-800)] lg:gap-y-[var(--space-1400)]">
            <div>
              <SectionHeader
                variant="multi-line"
                title={title}
                subtitle={subtitle}
                titleLg={t("cardSteps.titleLg")}
                stackedDesktopLines={headingDesktopLines}
              />
            </div>

            <ol className="m-0 grid list-none grid-cols-1 gap-y-[var(--space-600)] p-0 lg:grid-cols-3 lg:gap-[var(--space-600)]">
              {steps.map((item, index) => (
                <li key={item.text} className="min-w-0">
                  <Step
                    number={index + 1}
                    text={item.text}
                    iconShape={item.iconShape}
                    iconColor={item.iconColor}
                  />
                </li>
              ))}
            </ol>

            <div className="text-center">
              <Button
                buttonType="outline"
                palette="default"
                size="large"
                href={seeHowItWorksHref}
              >
                {t("cardSteps.buttons.seeHowItWorks")}
              </Button>
            </div>
          </div>
        </div>
      </section>
    </>
  );
}

export default CardStepsView;