"use client"

import { motion } from "framer-motion"
import type { LucideIcon } from "lucide-react"

interface HowItWorksStepProps {
  icon: LucideIcon
  title: string
  description: string
  step: number
  delay?: number
}

export function HowItWorksStep({ icon: Icon, title, description, step, delay = 0 }: HowItWorksStepProps) {
  return (
    <motion.div
      className="flex gap-4 items-start"
      initial={{ opacity: 0, y: 20 }}
      whileInView={{ opacity: 1, y: 0 }}
      transition={{ duration: 0.5, delay }}
      viewport={{ once: true }}
    >
      <div className="flex-shrink-0 w-12 h-12 rounded-full bg-gradient-to-br from-orange-500 to-amber-500 flex items-center justify-center text-white font-bold text-lg">
        {step}
      </div>
      <div className="space-y-2">
        <div className="flex items-center gap-2">
          <Icon className="h-5 w-5 text-orange-500" />
          <h3 className="text-xl font-bold">{title}</h3>
        </div>
        <p className="text-muted-foreground">{description}</p>
      </div>
    </motion.div>
  )
}

