import { motion } from "framer-motion";

interface MenuContentProps {
  navigation: { title: string; path: string }[];
  activeSection: string;
  handleNavigation: (path: string) => void;
}

const MenuContent = ({
  navigation,
  activeSection,
  handleNavigation,
}: MenuContentProps) => {
  return (
    <ul className="flex items-center gap-8">
      {navigation.map((item, idx) => {
        const isActive = activeSection === item.path;
        return (
          <li key={idx}>
            <motion.a
              href={item.path}
              className="relative block text-sm font-medium tracking-wide"
              animate={{ color: isActive ? "#ffffff" : "rgba(255,255,255,0.55)" }}
              whileHover={{ color: "#ffffff" }}
              whileTap={{ scale: 0.95 }}
              transition={{ type: "spring", stiffness: 400, damping: 25 }}
              aria-current={isActive ? "page" : undefined}
              onClick={(e) => {
                e.preventDefault();
                handleNavigation(item.path);
              }}
            >
              {item.title}
              {isActive && (
                <motion.span
                  layoutId="desktop-nav-underline"
                  className="absolute -bottom-1.5 left-0 h-px w-full rounded-full bg-gold-light"
                  transition={{ type: "spring", stiffness: 380, damping: 32 }}
                />
              )}
            </motion.a>
          </li>
        );
      })}
    </ul>
  );
};

export default MenuContent;