'use client'

import { motion, AnimatePresence } from 'framer-motion'
import { ChevronLeft, ChevronRight } from 'lucide-react'

interface NavigationControlsProps {
  onPrev: () => void
  onNext: () => void
  isFirst: boolean
  isLast: boolean
  current: number
  total: number
}

export default function NavigationControls({
  onPrev,
  onNext,
  isFirst,
  isLast,
  current,
  total,
}: NavigationControlsProps) {
  return (
    <>
      {/* Left Arrow */}
      <AnimatePresence>
        {!isFirst && (
          <motion.button
            initial={{ opacity: 0, x: -10 }}
            animate={{ opacity: 1, x: 0 }}
            exit={{ opacity: 0, x: -10 }}
            onClick={onPrev}
            className="fixed left-4 top-1/2 -translate-y-1/2 z-40
              w-10 h-10 rounded-full bg-white/[0.08] backdrop-blur-sm
              border border-white/10 flex items-center justify-center
              hover:bg-white/[0.15] transition-all group"
          >
            <ChevronLeft className="w-5 h-5 text-white/60 group-hover:text-white" />
          </motion.button>
        )}
      </AnimatePresence>

      {/* Right Arrow */}
      <AnimatePresence>
        {!isLast && (
          <motion.button
            initial={{ opacity: 0, x: 10 }}
            animate={{ opacity: 1, x: 0 }}
            exit={{ opacity: 0, x: 10 }}
            onClick={onNext}
            className="fixed right-4 top-1/2 -translate-y-1/2 z-40
              w-10 h-10 rounded-full bg-white/[0.08] backdrop-blur-sm
              border border-white/10 flex items-center justify-center
              hover:bg-white/[0.15] transition-all group"
          >
            <ChevronRight className="w-5 h-5 text-white/60 group-hover:text-white" />
          </motion.button>
        )}
      </AnimatePresence>

      {/* Slide Counter */}
      <div className="fixed bottom-4 left-1/2 -translate-x-1/2 z-40
        px-3 py-1.5 rounded-full bg-white/[0.06] backdrop-blur-sm
        border border-white/10 text-xs text-white/40 font-mono"
      >
        {current + 1} / {total}
      </div>
    </>
  )
}