import { SectionHeading } from "./section-heading";
import type { ProcessSectionCopy } from "./types";

type ProcessSectionProps = {
  copy: ProcessSectionCopy;
};

export function ProcessSection({ copy }: ProcessSectionProps) {
  return (
    <section className="space-y-10">
      <SectionHeading
        eyebrow={copy.eyebrow}
        title={copy.title}
        description={copy.description}
      />

      <ol className="grid grid-cols-1 gap-x-8 gap-y-10 sm:grid-cols-2 lg:grid-cols-4">
        {copy.steps.map((step, index) => (
          <li key={step.title} className="border-t border-border pt-5">
            <span className="block text-[2.75rem] font-semibold leading-none tracking-tight text-brand-primary/25">
              {String(index + 1).padStart(2, "0")}
            </span>
            <h3 className="mt-5 text-title font-semibold text-foreground">
              {step.title}
            </h3>
            <p className="mt-2 text-small leading-relaxed text-muted-foreground">
              {step.description}
            </p>
          </li>
        ))}
      </ol>
    </section>
  );
}