import { getTranslations } from "next-intl/server";
import { FadeIn } from "@/components/ui/fade-in";

interface Step {
  description: string;
  number: string;
  title: string;
}

interface HowItWorksProps {
  gradientDirection?: string;
  steps: Step[];
  subtitle?: string;
  title?: string;
}

export default async function HowItWorks({
  steps,
  gradientDirection = "bg-gradient-to-tr",
  title,
  subtitle,
}: HowItWorksProps) {
  const t = await getTranslations("howItWorks");

  const resolvedTitle = title ?? t("defaultTitle");
  const resolvedSubtitle = subtitle ?? t("defaultSubtitle");

  return (
    <section
      className={`relative py-12 sm:py-24 md:py-32 ${gradientDirection} overflow-hidden from-[#000] to-[#1A2428]`}
    >
      <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
        {/* Header */}
        <FadeIn className="mb-8 text-center md:mb-16" duration={0.5} y={20}>
          <h2 className="font-bold text-2xl text-neutral-200 tracking-tight sm:text-3xl md:text-4xl lg:text-5xl">
            {resolvedTitle}
          </h2>
          {resolvedSubtitle && (
            <p className="mx-auto mt-4 max-w-2xl text-base text-neutral-400 md:text-lg">
              {resolvedSubtitle}
            </p>
          )}
        </FadeIn>

        {/* Steps grid */}
        <div className="relative grid grid-cols-1 gap-4 md:grid-cols-3 md:gap-6">
          {/* Connecting dashed line on desktop */}
          <div
            aria-hidden="true"
            className="pointer-events-none absolute top-14 right-[calc(33.33%+1rem)] left-[calc(33.33%-1rem)] z-0 hidden border-[#333333] border-t-2 border-dashed md:block"
          />

          {steps.map((step, index) => (
            <FadeIn
              className="relative z-10"
              delay={index * 0.1}
              duration={0.5}
              key={step.number}
            >
              <div className="flex h-full flex-col items-center rounded-2xl border border-[#333333] bg-[#1a1a1a]/80 p-4 text-center backdrop-blur-sm sm:p-6 md:p-8">
                {/* Step number circle */}
                <div className="mb-5 flex h-12 w-12 items-center justify-center rounded-full bg-[#E00D54] font-bold text-lg text-white">
                  {step.number}
                </div>

                {/* Title */}
                <h3 className="mb-3 font-semibold text-lg text-neutral-200 md:text-xl">
                  {step.title}
                </h3>

                {/* Description */}
                <p className="text-neutral-400 text-sm leading-relaxed md:text-base">
                  {step.description}
                </p>
              </div>
            </FadeIn>
          ))}
        </div>
      </div>
    </section>
  );
}