"use client"

import { motion } from "framer-motion"
import { ChevronLeft, ChevronRight } from "lucide-react"
import Link from "next/link"

interface SayfaGecisOklariProps {
  oncekiSayfa?: {
    href: string
    baslik: string
  }
  sonrakiSayfa?: {
    href: string
    baslik: string
  }
  analitikGoster?: boolean
}

export default function SayfaGecisOklari({ oncekiSayfa, sonrakiSayfa, analitikGoster = true }: SayfaGecisOklariProps) {
  return (
    <>
      {/* Sol Ok - Önceki Sayfa */}
      {oncekiSayfa && (
        <motion.div
          initial={{ opacity: 0, x: -20 }}
          animate={{ opacity: 1, x: 0 }}
          transition={{ delay: 0.3 }}
          className="fixed left-0 top-28 sm:top-32 lg:top-1/2 lg:-translate-y-1/2 z-40"
        >
          <Link 
            href={oncekiSayfa.href}
            className="group flex items-center gap-2 bg-white/90 backdrop-blur-sm border border-slate-200 rounded-r-xl lg:rounded-r-2xl py-2 px-2 lg:py-4 lg:px-3 shadow-lg hover:shadow-xl hover:bg-white transition-all"
          >
            <ChevronLeft className="w-5 h-5 text-slate-400 group-hover:text-red-600 group-hover:-translate-x-1 transition-all" />
            {/* Desktop'ta başlık göster */}
            <div className="max-w-[120px] overflow-hidden hidden lg:block">
              <span className="text-xs text-slate-400 block">Önceki</span>
              <span className="text-sm font-medium text-slate-700 group-hover:text-slate-900 truncate block">
                {oncekiSayfa.baslik}
              </span>
            </div>
          </Link>
        </motion.div>
      )}

      {/* Sağ Ok - Sonraki Sayfa */}
      {sonrakiSayfa && (
        <motion.div
          initial={{ opacity: 0, x: 20 }}
          animate={{ opacity: 1, x: 0 }}
          transition={{ delay: 0.3 }}
          className="fixed right-0 top-28 sm:top-32 lg:top-1/2 lg:-translate-y-1/2 z-40"
        >
          <Link 
            href={sonrakiSayfa.href}
            className="group flex items-center gap-2 bg-white/90 backdrop-blur-sm border border-slate-200 rounded-l-xl lg:rounded-l-2xl py-2 px-2 lg:py-4 lg:px-3 shadow-lg hover:shadow-xl hover:bg-white transition-all"
          >
            {/* Desktop'ta başlık göster */}
            <div className="max-w-[120px] overflow-hidden text-right hidden lg:block">
              <span className="text-xs text-slate-400 block">Sonraki</span>
              <span className="text-sm font-medium text-slate-700 group-hover:text-slate-900 truncate block">
                {sonrakiSayfa.baslik}
              </span>
            </div>
            <ChevronRight className="w-5 h-5 text-slate-400 group-hover:text-red-600 group-hover:translate-x-1 transition-all" />
          </Link>
        </motion.div>
      )}

      {/* Ortadaki Analitik Yazısı - Sabit Kırmızı (sadece analitikGoster true ise, sadece desktop) */}
      {analitikGoster && (
        <motion.div
          initial={{ opacity: 0, y: -10 }}
          animate={{ opacity: 1, y: 0 }}
          className="fixed top-24 left-1/2 -translate-x-1/2 z-40 hidden lg:block"
        >
          <Link 
            href="/" 
            className="text-red-600 font-bold text-base hover:text-red-700 transition-colors"
          >
            Analitik
          </Link>
        </motion.div>
      )}
    </>
  )
}