import React, { useState } from "react";
import { motion, AnimatePresence } from "framer-motion";

interface CityTabsNavbarProps {
  onPageSelect: (page: string) => void;
}

const CityTabsNavbar: React.FC<CityTabsNavbarProps> = ({ onPageSelect }) => {
  const [selectedCity, setSelectedCity] = useState<string | null>(null);

  const cities = ["Melbourne", "Sydney", "Brisbane"];

  // City-specific submenus
  const cityMenus: Record<string, string[]> = {
    Melbourne: ["Attractions", "Passes", "Deals", "Events"],
    Sydney: ["Attractions", "Tours", "Food & Drinks"],
    Brisbane: ["Passes", "Nature", "Culture"]
  };

  const handleCityClick = (city: string) => {
    setSelectedCity(city);
  };

  const handleBackToCities = () => {
    setSelectedCity(null);
  };

  return (
    <div className="w-full bg-white shadow-sm border-t border-gray-200">
      <div className="container mx-auto flex justify-center py-3 gap-8 text-base font-medium">
        <AnimatePresence mode="wait">
          {!selectedCity ? (
            <motion.div
              key="cities"
              initial={{ opacity: 0, y: 10 }}
              animate={{ opacity: 1, y: 0 }}
              exit={{ opacity: 0, y: -10 }}
              className="flex gap-8"
            >
              {cities.map((city) => (
                <button
                  key={city}
                  onClick={() => handleCityClick(city)}
                  className="text-gray-700 hover:text-primary transition-colors"
                >
                  {city}
                </button>
              ))}
            </motion.div>
          ) : (
            <motion.div
              key={selectedCity}
              initial={{ opacity: 0, y: 10 }}
              animate={{ opacity: 1, y: 0 }}
              exit={{ opacity: 0, y: -10 }}
              className="flex gap-8 items-center"
            >
              <button
                onClick={handleBackToCities}
                className="text-sm text-gray-500 hover:text-primary mr-4"
              >
                ← Back
              </button>

              {cityMenus[selectedCity].map((menu) => (
                <button
                  key={menu}
                  onClick={() => onPageSelect(`${selectedCity}-${menu.toLowerCase()}`)}
                  className="text-gray-700 hover:text-primary transition-colors"
                >
                  {menu}
                </button>
              ))}
            </motion.div>
          )}
        </AnimatePresence>
      </div>
    </div>
  );
};

export default CityTabsNavbar;
