'use client';

import { motion } from 'framer-motion';
import { Check } from 'lucide-react';

const STEPS = [
  'Sujet & mot-clé',
  'Format & longueur',
  'Ton de voix',
  'Intention & audience',
  'Récap & lancement',
];

interface StepProgressBarProps {
  currentStep: number;
}

export function StepProgressBar({ currentStep }: StepProgressBarProps) {
  return (
    <div className="w-full mb-8">
      {/* Connecting line behind circles */}
      <div className="relative flex items-start justify-between">
        {/* Background line */}
        <div className="absolute left-0 right-0 top-3.5 -translate-y-1/2 h-px bg-border" />
        {/* Animated progress line */}
        <motion.div
          className="absolute left-0 top-3.5 -translate-y-1/2 h-px bg-gradient-to-r from-accent to-cyan-400"
          initial={{ width: '0%' }}
          animate={{ width: `${(currentStep / (STEPS.length - 1)) * 100}%` }}
          transition={{ duration: 0.4, ease: 'easeInOut' }}
        />
        {STEPS.map((label, i) => {
          const done = i < currentStep;
          const active = i === currentStep;
          return (
            <div key={i} className="relative z-10 flex flex-col items-center w-[72px]">
              {/* Circle */}
              <motion.div
                className={`w-7 h-7 rounded-full flex items-center justify-center text-[11px] font-semibold border transition-colors ${
                  done
                    ? 'bg-accent border-accent text-white'
                    : active
                      ? 'bg-accent/20 border-accent text-accent-light'
                      : 'bg-bg border-border text-text-dimmer'
                }`}
                initial={false}
                animate={{ scale: active ? 1.1 : 1 }}
                transition={{ duration: 0.2 }}
              >
                {done ? <Check className="w-3.5 h-3.5" strokeWidth={2.5} /> : i + 1}
              </motion.div>
              {/* Label */}
              <div
                className={`mt-2 text-[10.5px] text-center leading-tight transition-colors ${
                  active
                    ? 'text-accent-light font-medium'
                    : done
                      ? 'text-text-dim'
                      : 'text-text-dimmer'
                }`}
              >
                {label}
              </div>
            </div>
          );
        })}
      </div>
    </div>
  );
}