import React from 'react';
import { motion } from 'framer-motion';
import { Button } from '@/components/ui/button';
import { ChevronLeft, ChevronRight, Home } from 'lucide-react';

export default function SlideNavigation({ 
  currentSlide, 
  totalSlides, 
  onPrev, 
  onNext, 
  onHome,
  chapterTitle 
}) {
  return (
    <div className="fixed bottom-0 left-0 right-0 z-50">
      <div className="bg-slate-900/90 backdrop-blur-xl border-t border-white/10">
        <div className="max-w-4xl mx-auto px-6 py-4">
          <div className="flex items-center justify-between gap-4">
            {/* Progress Dots */}
            <div className="hidden sm:flex items-center gap-2">
              {Array.from({ length: totalSlides }).map((_, i) => (
                <motion.div
                  key={i}
                  className={`h-2 rounded-full transition-all duration-300 ${
                    i === currentSlide 
                      ? 'w-8 bg-gradient-to-r from-cyan-400 to-purple-400' 
                      : i < currentSlide
                        ? 'w-2 bg-white/50'
                        : 'w-2 bg-white/20'
                  }`}
                  initial={false}
                  animate={{ scale: i === currentSlide ? 1.1 : 1 }}
                />
              ))}
            </div>

            {/* Slide Counter (Mobile) */}
            <div className="sm:hidden text-white/70 font-medium">
              {currentSlide + 1} / {totalSlides}
            </div>

            {/* Navigation Buttons */}
            <div className="flex items-center gap-3">
              <Button
                size="icon"
                onClick={onHome}
                className="text-white/70 hover:text-white bg-white/5 hover:bg-white/10 rounded-xl border-0"
              >
                <Home className="w-5 h-5" />
              </Button>

              <Button
                onClick={onPrev}
                disabled={currentSlide === 0}
                className="border-2 border-white/20 text-white bg-white/5 hover:bg-white/10 rounded-xl disabled:opacity-30 disabled:cursor-not-allowed font-semibold"
              >
                <ChevronLeft className="w-5 h-5 mr-1" />
                Back
              </Button>

              <Button
                onClick={onNext}
                disabled={currentSlide === totalSlides - 1}
                className="bg-gradient-to-r from-blue-500 to-purple-600 hover:from-blue-600 hover:to-purple-700 rounded-xl disabled:opacity-30 disabled:cursor-not-allowed text-white font-bold border-0 shadow-lg"
              >
                Next
                <ChevronRight className="w-5 h-5 ml-1" />
              </Button>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}