import { motion } from 'motion/react';
import { footerSections } from '../utils/footerConstants';

interface FooterNavigationProps {
  onHomeClick?: () => void;
  onMelbourneClick?: () => void;
  onPassesClick?: () => void;
  onSignInClick?: () => void;
  onAttractionsClick?: () => void;
  onBlogsClick?: () => void;
  onHowItWorksClick?: () => void;
  onFAQClick?: () => void;
  onPrivacyPolicyClick?: () => void;
  onAboutUsClick?: () => void;
  onContactUsClick?: () => void;
  currentPage?: string;
}

export function FooterNavigation({ 
  onHomeClick,
  onMelbourneClick,
  onPassesClick,
  onSignInClick,
  onAttractionsClick,
  onBlogsClick,
  onHowItWorksClick,
  onFAQClick,
  onPrivacyPolicyClick,
  onAboutUsClick,
  onContactUsClick,
  currentPage
}: FooterNavigationProps) {
  return (
    <div className="lg:col-span-8 grid grid-cols-2 md:grid-cols-4 gap-8">
      {Object.entries(footerSections).map(([key, section]) => (
        <motion.div 
          key={key}
          className="space-y-4"
          initial={{ opacity: 0, y: 20 }}
          whileInView={{ opacity: 1, y: 0 }}
          viewport={{ once: true }}
          transition={{ 
            duration: 0.5, 
            delay: Object.keys(footerSections).indexOf(key) * 0.1 + 0.1
          }}
        >
          <h4 className="font-semibold text-white">{section.title}</h4>
          <ul className="space-y-3">
            {section.links.map((link, index) => {
              const getClickHandler = () => {
                switch (link) {
                  case 'Home': return onHomeClick;
                  case 'Melbourne': return onMelbourneClick;
                  case 'Passes': return onPassesClick;
                  case 'Sign In': return onSignInClick;
                  case 'Attractions': return onAttractionsClick;
                  case 'Blog': return onBlogsClick;
                  case 'How It Works': return onHowItWorksClick;
                  case 'FAQ': return onFAQClick;
                  case 'Privacy Policy': return onPrivacyPolicyClick;
                  case 'Contact Us': return onContactUsClick;
                  default: return undefined;
                }
              };

              const clickHandler = getClickHandler();

              return (
                <li key={link}>
                  {clickHandler ? (
                    <motion.button 
                      onClick={(e) => {
                        e.preventDefault();
                        clickHandler();
                      }}
                      className="text-white/80 hover:text-white transition-colors duration-200 text-sm text-left"
                      whileHover={{ x: 4 }}
                      transition={{ duration: 0.2 }}
                    >
                      {link}
                    </motion.button>
                  ) : (
                    <motion.span
                      className="text-white/80 cursor-default text-sm"
                    >
                      {link}
                    </motion.span>
                  )}
                </li>
              );
            })}
          </ul>
        </motion.div>
      ))}
    </div>
  );
}