import { Step } from '@/lib/types'

export function StepCard({ step, index }: { step: Step; index: number }) {
  return (
    <div className="flex gap-4">
      <div className="flex-shrink-0 w-10 h-10 rounded-full bg-primary flex items-center justify-center text-white font-bold text-lg">
        {index + 1}
      </div>
      <div className="flex-1 pb-8 border-l-2 border-primary/20 pl-6 -ml-5 mt-5">
        <h3 className="font-heading font-bold text-lg mb-1">{step.title}</h3>
        <p className="text-dark/70 leading-relaxed">{step.description}</p>
      </div>
    </div>
  )
}