interface StepHeaderProps {
  stepNumber: number;
  title: string;
  description: string;
  className?: string;
}

export function StepHeader({ stepNumber, title, description, className = "" }: StepHeaderProps) {
  return (
    <div className={`flex items-center gap-4 ${className}`}>
      <div className="relative flex items-center justify-center">
        <span className="absolute inset-0 rounded-full bg-blue-100/40 blur-sm" aria-hidden />
        <span className="relative inline-flex h-11 w-11 items-center justify-center rounded-full border border-blue-200 bg-white text-base font-semibold text-blue-600 shadow-sm">
          {stepNumber}
        </span>
      </div>
      <div>
        <h3 className="text-2xl font-bold text-gray-900">{title}</h3>
        <p className="text-gray-600 text-sm mt-0.5">{description}</p>
      </div>
    </div>
  );
}
