"use client";

import Image from "next/image";
import { memo } from "react";
import { getAssetPath, tripleStepShapePath } from "../../../../lib/assetUtils";
import AssetIcon from "../../asset/icon";
import Button from "../../buttons/Button";
import type { TripleStepViewProps } from "./TripleStep.types";

const TRIPLE_STEP_NUMERIC_ICONS = [
  "numeric_1_circle",
  "numeric_2_circle",
  "numeric_3_circle",
] as const;

function TripleStepView({
  heading,
  steps,
  ctaText,
  ctaHref,
  headingId,
  className = "",
}: TripleStepViewProps) {
  /** Decorative column art — `public/assets/shapes/triple-step.svg` (288×576 viewBox). */
  const shapeSrc = getAssetPath(tripleStepShapePath());

  return (
    <section
      data-figma-node="22084-859405"
      aria-labelledby={headingId}
      className={`bg-transparent px-[var(--spacing-scale-032)] py-[var(--spacing-scale-032)] md:px-0 md:py-[var(--spacing-scale-048)] ${className}`.trim()}
    >
      <div className="mx-auto grid w-full min-w-0 max-w-[560px] grid-cols-1 items-center gap-[var(--spacing-scale-032)] md:max-w-none md:grid-cols-2 md:gap-0">
        <div className="flex w-full min-w-0 flex-col gap-[var(--spacing-scale-040)] break-words md:pl-[var(--spacing-scale-032)] lg:min-w-[358px] lg:pl-[var(--spacing-scale-064)]">
          <h2
            id={headingId}
            className="font-bricolage-grotesque text-medium-heading text-[var(--color-content-default-primary)] md:text-large-heading"
          >
            {heading}
          </h2>
          {steps.map((step, index) => (
            <div
              key={step.title}
              className="flex flex-col items-start gap-[var(--spacing-scale-016)]"
            >
              <AssetIcon
                name={
                  TRIPLE_STEP_NUMERIC_ICONS[Math.min(index, 2)]
                }
                size={32}
                className="shrink-0"
              />
              <div className="flex min-w-0 flex-col gap-1 text-[var(--color-content-default-primary)]">
                <p className="font-bricolage-grotesque text-[18px] font-medium leading-[22px]">
                  {step.title}
                </p>
                <p className="text-small-paragraph">
                  {step.body}
                </p>
              </div>
            </div>
          ))}
          <div className="flex justify-start">
            <Button
              href={ctaHref}
              buttonType="outline"
              palette="default"
              size="medium"
              className="max-md:!px-[var(--spacing-scale-012)] max-md:!py-[var(--spacing-scale-010)] max-md:!text-[14px] max-md:!leading-[18px] md:!p-[var(--spacing-scale-012)] md:!text-medium-label md:!gap-[var(--spacing-scale-006)]"
            >
              {ctaText}
            </Button>
          </div>
        </div>
        <div
          className="relative hidden aspect-[1/2] min-w-0 w-full md:block"
          aria-hidden
        >
          <Image
            src={shapeSrc}
            alt=""
            fill
            unoptimized
            sizes="(min-width: 640px) 50vw, 100vw"
            className="object-contain"
          />
        </div>
      </div>
    </section>
  );
}

TripleStepView.displayName = "TripleStepView";

export default memo(TripleStepView);
