"use client";
import { motion } from "framer-motion";

interface StepCardProps {
  step: string;
  icon: string;
  title: string;
  description: string;
  delay?: number;
  isLast?: boolean;
}

export default function StepCard({
  step,
  icon,
  title,
  description,
  delay = 0,
  isLast = false,
}: StepCardProps) {
  return (
    <motion.div
      initial={{ opacity: 0, y: 20 }}
      whileInView={{ opacity: 1, y: 0 }}
      viewport={{ once: true }}
      transition={{ duration: 0.5, delay }}
      className="relative group"
    >
      {/* Connector line to next step */}
      {!isLast && (
        <div className="hidden lg:block absolute top-8 left-full w-full h-0.5 bg-gradient-to-r from-brand-green/30 to-transparent z-0" />
      )}

      <div className="relative rounded-2xl border border-slate-200 dark:border-slate-700 bg-white dark:bg-slate-800 p-6 hover:shadow-xl hover:border-brand-green/30 transition-all duration-300">
        {/* Step number badge */}
        <motion.div
          initial={{ scale: 0 }}
          whileInView={{ scale: 1 }}
          viewport={{ once: true }}
          transition={{
            duration: 0.4,
            delay: delay + 0.2,
            type: "spring",
            stiffness: 200,
          }}
          className="absolute -top-4 -left-4 z-10"
        >
          <div className="relative">
            {/* Glow effect */}
            <div className="absolute inset-0 bg-brand-green rounded-full blur-md opacity-50" />
            {/* Badge */}
            <div className="relative w-10 h-10 rounded-full bg-gradient-to-br from-brand-green to-emerald-600 text-white flex items-center justify-center font-bold text-lg shadow-lg">
              {step}
            </div>
          </div>
        </motion.div>

        {/* Icon */}
        <motion.div
          whileHover={{ scale: 1.1, rotate: [0, -5, 5, 0] }}
          transition={{ duration: 0.4 }}
          className="text-4xl mb-4 mt-2 w-14 h-14 flex items-center justify-center rounded-xl bg-gradient-to-br from-slate-50 to-slate-100 dark:from-slate-700 dark:to-slate-800"
        >
          {icon}
        </motion.div>

        <h3 className="text-lg font-semibold text-brand-ink dark:text-white mb-3 group-hover:text-brand-green transition-colors">
          {title}
        </h3>

        <p className="text-slate-600 dark:text-slate-300 text-sm leading-relaxed">
          {description}
        </p>

        {/* Progress indicator */}
        <div className="mt-4 flex items-center gap-2">
          <div className="flex-1 h-1 bg-slate-100 dark:bg-slate-700 rounded-full overflow-hidden">
            <motion.div
              initial={{ width: 0 }}
              whileInView={{ width: "100%" }}
              viewport={{ once: true }}
              transition={{ duration: 0.8, delay: delay + 0.4 }}
              className="h-full bg-gradient-to-r from-brand-green to-emerald-400"
            />
          </div>
          <span className="text-xs text-slate-400">Step {step}</span>
        </div>
      </div>
    </motion.div>
  );
}