Step cards

'use client';

import type * as React from 'react';
import { FadeIn } from '@/components/ds/fade-in';
import { cn } from '@/lib/utils';

// @fast-ds [email protected]

export type Step = {
  title: React.ReactNode;
  description: React.ReactNode;
  /** Links or buttons at the foot of the card. */
  actions?: React.ReactNode;
};

export type StepCardsProps = {
  steps: Step[];
  className?: string;
};

/**
 * A short sequence — "from nothing to the city" — as numbered glass cards that rise in one after
 * another. Three steps read best; more than four is a list, not a sequence.
 */
function StepCards({ steps, className }: StepCardsProps) {
  return (
    <ol
      data-slot="step-cards"
      className={cn('grid grid-cols-1 gap-6 md:grid-cols-3 md:gap-8', className)}
    >
      {steps.map((step, index) => (
        // biome-ignore lint/suspicious/noArrayIndexKey: steps are positional; the number is the identity
        <li key={index} className="flex">
          <FadeIn
            delay={index * 0.15}
            from={{ y: 48 }}
            className="glass flex w-full flex-col gap-6 p-6 md:p-8"
          >
            <span className="font-display text-6xl leading-none text-foreground/20">
              {String(index + 1).padStart(2, '0')}
            </span>
            <div className="flex flex-col gap-3">
              <h3 className="text-xl text-foreground md:text-2xl">{step.title}</h3>
              <p className="text-sm leading-relaxed text-muted-foreground">{step.description}</p>
            </div>
            {step.actions && <div className="mt-auto flex flex-wrap gap-2">{step.actions}</div>}
          </FadeIn>
        </li>
      ))}
    </ol>
  );
}

export { StepCards };