
// import { motion } from 'motion/react';
// import { useNavigate } from 'react-router-dom';

// interface SubNavbarProps {
//   activePage?: 'citycards' | 'magic-itinerary' | 'postcards' | 'offers' | 'esims' | 'hotel-discounts';
//   activeTab?: 'citycards' | 'magic-itinerary' | 'postcards' | 'offers' | 'esims' | 'hotel-discounts';
// }

// export function SubNavbar({
//   activeTab,
//   activePage,
// }: SubNavbarProps) {
//   const navigate = useNavigate();
//   const activeProduct = activePage || activeTab;

//   const products = [
//     {
//       id: 'citycards',
//       label: 'CityCards',
//       path: '/citycards'
//     },
//     {
//       id: 'magic-itinerary',
//       label: 'Magic Itinerary',
//       path: '/magic-itinerary'
//     },
//     {
//       id: 'postcards',
//       label: 'PostCards',
//       path: '/postcards'
//     },
//     {
//       id: 'offers',
//       label: 'Offers',
//       path: '/offers'
//     },
//     {
//       id: 'esims',
//       label: 'eSIMs',
//       path: '/esims'
//     },
//     {
//       id: 'hotel-discounts',
//       label: 'Hotel Discounts',
//       path: '/hotel-discounts'
//     }
//   ];

//   const handleProductClick = (path: string) => {
//     navigate(path);
//   };

//   return (
//     <motion.div
//       className="fixed w-full z-30 hidden lg:block"
//       initial={{ y: -20, opacity: 0 }}
//       animate={{ y: 0, opacity: 1 }}
//       transition={{
//         duration: 0.6,
//         ease: [0.25, 0.1, 0.25, 1],
//         delay: 0.4
//       }}
//       style={{ top: '80px' }}
//     >
//       <motion.div
//         className="bg-white px-2 py-2 shadow-lg border border-gray-200"
//         initial={{ scale: 0.9 }}
//         animate={{
//           scale: 1,
//           y: 0,
//           boxShadow: "0 10px 15px -3px rgba(0, 0, 0, 0.05), 0 4px 6px -2px rgba(0, 0, 0, 0.03)"
//         }}
//         transition={{ duration: 0.3, ease: [0.25, 0.1, 0.25, 1] }}
//       >
//         <div className="flex items-center gap-1 justify-center">
//           {products.map((product) => (
//             <motion.button
//               key={product.id}
//               onClick={() => handleProductClick(product.path)}
//               className={`font-poppins font-medium text-base relative px-4 py-2.5 transition-all duration-300 whitespace-nowrap rounded-full ${activeProduct === product.id
//                   ? 'bg-primary text-white shadow-md'
//                   : 'text-gray-700 hover:text-white hover:bg-gray-800'
//                 }`}
//               whileHover={{ scale: 1.02 }}
//               whileTap={{ scale: 0.98 }}
//             >
//               {product.label}

//               {/* Hover effect for non-active items */}
//               {activeProduct !== product.id && (
//                 <motion.div
//                   className="absolute inset-0 bg-gray-800 rounded-full -z-10"
//                   initial={{ opacity: 0, scale: 0.9 }}
//                   whileHover={{ opacity: 1, scale: 1 }}
//                   transition={{ duration: 0.2 }}
//                 />
//               )}
//             </motion.button>
//           ))}
//         </div>
//       </motion.div>
//     </motion.div>
//   );
// }

// export default SubNavbar;