import { ChevronLeft, ChevronRight, Send } from 'lucide-react';

interface EvaluationNavigationProps {
  currentStep: number;
  totalSteps: number;
  handlePrev: () => void;
  handleNext: () => void;
}

export default function EvaluationNavigation({
  currentStep,
  totalSteps,
  handlePrev,
  handleNext
}: EvaluationNavigationProps) {
  if (currentStep > totalSteps) return null;

  return (
    <div className="px-6 py-4 bg-slate-50 border-t border-slate-100 flex justify-between items-center bg-slate-50/70">
      <button
        type="button"
        onClick={handlePrev}
        disabled={currentStep === 1}
        className="flex items-center gap-1.5 px-3.5 py-2 hover:bg-slate-100 text-slate-600 text-xs font-bold rounded-xl disabled:opacity-30 disabled:hover:bg-transparent transition cursor-pointer"
      >
        <ChevronLeft className="h-4 w-4" />
        <span>Sebelumnya</span>
      </button>

      <div className="hidden sm:flex items-center gap-2">
        {Array.from({ length: totalSteps }).map((_, stepIdx) => {
          const stepNum = stepIdx + 1;
          return (
            <div
              key={stepIdx}
              className={`h-2 rounded-full transition-all duration-300 ${
                stepNum === currentStep 
                  ? 'w-5 bg-blue-600' 
                  : stepNum < currentStep 
                    ? 'w-2 bg-blue-300' 
                    : 'w-2 bg-slate-200'
              }`}
            />
          );
        })}
      </div>

      <button
        type="button"
        onClick={handleNext}
        className={`flex items-center gap-1.5 px-4.5 py-2 text-xs font-extrabold rounded-xl text-white transition cursor-pointer shadow-md ${
          currentStep === totalSteps 
            ? 'bg-emerald-600 hover:bg-emerald-700 hover:shadow-emerald-500/10' 
            : 'bg-blue-600 hover:bg-blue-700 hover:shadow-blue-500/10'
        }`}
      >
        <span>{currentStep === totalSteps ? 'Selesai & Kirim' : 'Selanjutnya'}</span>
        {currentStep === totalSteps ? <Send className="h-4 w-4" /> : <ChevronRight className="h-4 w-4" />}
      </button>
    </div>
  );
}