import React from 'react';

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

interface ProcessStepsProps {
  steps: Step[];
}

export const ProcessSteps: React.FC<ProcessStepsProps> = ({ steps }) => {
  return (
    <div className="relative py-12">
      <div className="absolute top-1/2 left-0 right-0 h-1 bg-ui-dark -translate-y-1/2 hidden md:block"></div>
      
      <div className="grid grid-cols-1 md:grid-cols-5 gap-12 relative z-10">
        {steps.map((step, index) => (
          <div key={index} className="flex flex-col items-center text-center group">
            <div className="w-16 h-16 rounded-full bg-background border-2 border-ui-border flex items-center justify-center mb-6 group-hover:border-primary group-hover:shadow-[0_0_20px_rgba(0,113,227,0.3)] transition-all duration-500 relative z-20">
              <span className="text-xl font-bold text-neutral-gray group-hover:text-primary transition-colors">
                {index + 1}
              </span>
            </div>
            <h4 className="text-lg font-bold mb-2 text-white">{step.title}</h4>
            <p className="text-sm text-neutral-gray leading-relaxed">{step.description}</p>
          </div>
        ))}
      </div>
    </div>
  );
};
