import { useLocation, useNavigate } from 'react-router-dom';
import { motion } from 'framer-motion';
import { Webhook, Radio, MessageSquare, Star } from 'lucide-react';

const tabs = [
  { label: 'Webhook Ayarları', path: '/telegram/webhooks', icon: Webhook },
  { label: 'Kanallar', path: '/telegram/channels', icon: Radio },
  { label: 'Mesajlar', path: '/telegram/messages', icon: MessageSquare },
  { label: 'Stars Gelir', path: '/telegram/stars', icon: Star },
];

const TelegramSubNav: React.FC = () => {
  const location = useLocation();
  const navigate = useNavigate();

  return (
    <motion.div
      initial={{ opacity: 0, y: -5 }}
      animate={{ opacity: 1, y: 0 }}
      className="mb-6 flex gap-1 rounded-xl border border-white/[0.06] bg-white/[0.02] p-1 backdrop-blur-xl"
    >
      {tabs.map((tab) => {
        const isActive = location.pathname === tab.path;
        const Icon = tab.icon;
        return (
          <button
            key={tab.path}
            onClick={() => navigate(tab.path)}
            className={`relative flex items-center gap-2 rounded-lg px-4 py-2.5 text-sm font-medium transition-all ${
              isActive ? 'text-white' : 'text-slate-400 hover:bg-white/[0.04] hover:text-slate-200'
            }`}
          >
            {isActive && (
              <motion.div
                layoutId="telegramSubNav"
                className="absolute inset-0 rounded-lg bg-gradient-to-r from-indigo-500 to-violet-500 shadow-lg shadow-indigo-500/20"
                transition={{ type: 'spring', stiffness: 350, damping: 30 }}
              />
            )}
            <Icon size={16} className="relative z-10" />
            <span className="relative z-10 hidden sm:inline">{tab.label}</span>
          </button>
        );
      })}
    </motion.div>
  );
};

export default TelegramSubNav;