import { motion } from 'motion/react';
import { Facebook, Twitter, Instagram, Youtube } from 'lucide-react';

interface FooterBottomProps {
  onPrivacyPolicyClick?: () => void;
}

export function FooterBottom({ onPrivacyPolicyClick }: FooterBottomProps) {
  return (
    <motion.div 
      className="border-t border-white/20 pt-8"
      initial={{ opacity: 0, y: 20 }}
      whileInView={{ opacity: 1, y: 0 }}
      viewport={{ once: true }}
      transition={{ duration: 0.6, delay: 0.5 }}
    >
      <div className="flex flex-col lg:flex-row justify-between items-center space-y-6 lg:space-y-0">
        {/* Copyright */}
        <p className="text-white/60 text-sm">
          © 2024 CityCards. All rights reserved.
        </p>
        
        {/* Right Section - Legal Links and Social Icons */}
        <div className="flex flex-col md:flex-row items-center space-y-4 md:space-y-0 md:space-x-8">
          {/* Legal Links */}
          <div className="flex space-x-6 text-sm">
            <motion.button 
              onClick={onPrivacyPolicyClick}
              className="text-white/70 hover:text-white transition-colors duration-200"
              whileHover={{ y: -1 }}
              whileTap={{ scale: 0.95 }}
            >
              Privacy Policy
            </motion.button>
            <motion.a 
              href="#" 
              className="text-white/70 hover:text-white transition-colors duration-200"
              whileHover={{ y: -1 }}
              whileTap={{ scale: 0.95 }}
            >
              Terms of Service
            </motion.a>
            <motion.a 
              href="#" 
              className="text-white/70 hover:text-white transition-colors duration-200"
              whileHover={{ y: -1 }}
              whileTap={{ scale: 0.95 }}
            >
              Cookie Policy
            </motion.a>
          </div>
          
          {/* Social Icons - Horizontal Layout */}
          <div className="flex space-x-3">
            {[Facebook, Twitter, Instagram, Youtube].map((Icon, index) => (
              <motion.a 
                key={index}
                href="#" 
                className="text-white/70 hover:text-white transition-colors duration-200 p-2 rounded-lg hover:bg-white/10"
                whileHover={{ scale: 1.1, y: -2 }}
                whileTap={{ scale: 0.95 }}
                transition={{ duration: 0.2, delay: index * 0.05 }}
              >
                <Icon className="w-5 h-5" />
              </motion.a>
            ))}
          </div>
        </div>
      </div>
    </motion.div>
  );
}