import React from "react";

interface WorkflowStep {
  title: string;
  subtitle: string;
}

interface WorkflowStepsProps {
  steps: WorkflowStep[];
}

const WorkflowSteps: React.FC<WorkflowStepsProps> = ({ steps }) => {
  const stepColors = [
    "from-[var(--color-primary)] to-[var(--color-primary-dark)]",
    "from-[var(--color-success)] to-[var(--color-success-dark)]",
    "from-[var(--color-warning)] to-[var(--color-warning-dark)]",
    "from-[var(--color-purple)] to-[var(--color-purple-dark)]",
  ];

  return (
    <div className="max-w-6xl mx-auto px-6 py-24">
      <div className="grid grid-cols-1 md:grid-cols-4 gap-6">
        {steps.map((step, index) => {
          const gradient = stepColors[index % stepColors.length];
          return (
            <div
              key={step.title}
              className="rounded-3xl border-2 border-slate-200 bg-gradient-to-br from-white to-slate-50/50 p-6 flex flex-col gap-4 hover:border-[var(--color-primary)]/50 transition-all shadow-sm hover:shadow-xl hover:-translate-y-1 group"
            >
              <div className={`h-12 w-12 rounded-2xl bg-gradient-to-br ${gradient} flex items-center justify-center font-semibold text-white text-xl shadow-lg`}>
                {index + 1}
              </div>
              <h3 className="text-lg font-semibold text-slate-900 leading-snug group-hover:text-[var(--color-primary)] transition">
                {step.title}
              </h3>
              <p className="text-sm text-slate-600 leading-relaxed">
                {step.subtitle}
              </p>
            </div>
          );
        })}
      </div>
    </div>
  );
};

export default WorkflowSteps;

