'use client'

import { motion } from 'framer-motion'
import { Language } from '@/lib/types'
import { t } from '@/lib/i18n'

interface SlideOverviewProps {
  currentIndex: number
  onGoToSlide: (index: number) => void
  onClose: () => void
  lang: Language
}

export default function SlideOverview({ currentIndex, onGoToSlide, onClose, lang }: SlideOverviewProps) {
  const i = t(lang)

  return (
    <motion.div
      initial={{ opacity: 0 }}
      animate={{ opacity: 1 }}
      exit={{ opacity: 0 }}
      className="fixed inset-0 z-50 bg-black/90 backdrop-blur-sm flex items-center justify-center p-8"
      onClick={onClose}
    >
      <motion.div
        initial={{ scale: 0.9, opacity: 0 }}
        animate={{ scale: 1, opacity: 1 }}
        className="grid grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-3 max-w-5xl w-full"
        onClick={(e) => e.stopPropagation()}
      >
        {i.slideNames.map((name, idx) => (
          <motion.button
            key={idx}
            initial={{ opacity: 0, y: 20 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ delay: idx * 0.03 }}
            onClick={() => onGoToSlide(idx)}
            className={`
              aspect-video rounded-xl p-4 text-left
              border transition-all
              ${idx === currentIndex
                ? 'bg-indigo-500/20 border-indigo-500 shadow-lg shadow-indigo-500/20'
                : 'bg-white/[0.05] border-white/10 hover:bg-white/[0.1] hover:border-white/20'
              }
            `}
          >
            <span className="text-xs font-mono text-white/40 block mb-1">{idx + 1}</span>
            <span className={`text-sm font-medium ${idx === currentIndex ? 'text-white' : 'text-white/70'}`}>
              {name}
            </span>
          </motion.button>
        ))}
      </motion.div>
    </motion.div>
  )
}