import * as React from "react";
import { Sparkles } from "lucide-react";
import { affiliatesTexts } from "@/lib/i18n/affiliates";

export function AffiliateHowItWorks() {
  return (
    <div className="rounded-2xl border bg-card p-5 shadow-sm sm:p-6">
      <div className="mb-4 flex items-center gap-2">
        <div className="flex size-8 items-center justify-center rounded-lg bg-cyan-500/10 text-cyan-600 dark:text-cyan-400">
          <Sparkles className="size-4" />
        </div>
        <h2 className="font-display text-base font-semibold tracking-tight">
          {affiliatesTexts.howItWorksTitle}
        </h2>
      </div>

      <ol className="grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
        {affiliatesTexts.howItWorksSteps.map((step, index) => (
          <li key={step} className="rounded-xl border bg-muted/25 p-4">
            <span className="font-mono text-xs font-semibold text-primary">
              {String(index + 1).padStart(2, "0")}
            </span>
            <p className="mt-1.5 text-sm leading-relaxed text-muted-foreground">{step}</p>
          </li>
        ))}
      </ol>
    </div>
  );
}

export default AffiliateHowItWorks;