import React, { useState } from 'react';
    import { Link } from 'react-router-dom';
    import { Button } from '@/components/ui/button';
    import { Music2, Menu, X, Sparkles } from 'lucide-react';
    import { motion, AnimatePresence } from 'framer-motion';

    const Navbar = () => {
      const [mobileMenuOpen, setMobileMenuOpen] = useState(false);

      const toggleMobileMenu = () => {
        setMobileMenuOpen(!mobileMenuOpen);
      };

      const navLinks = [
        { to: "/", text: "Accueil" },
        { to: "/creations", text: "Créations" },
        { to: "/commander", text: "Commander une chanson", primary: true },
      ];

      const mobileMenuVariants = {
        hidden: { opacity: 0, y: -20 },
        visible: { opacity: 1, y: 0, transition: { duration: 0.3 } },
        exit: { opacity: 0, y: -20, transition: { duration: 0.2 } },
      };

      return (
        <nav className="bg-background/80 backdrop-blur-md shadow-lg sticky top-0 z-50">
          <div className="container mx-auto px-4 py-3 flex justify-between items-center">
            <Link to="/" className="flex items-center space-x-2 text-2xl font-bold">
              <Music2 className="h-8 w-8 text-primary" />
              <span className="gradient-text">Dites le en chanson</span>
            </Link>
            
            <div className="hidden md:flex space-x-2 items-center">
              <Button variant="ghost" asChild>
                <Link to="/">Accueil</Link>
              </Button>
              <Button variant="ghost" asChild>
                <Link to="/creations" className="flex items-center">
                  <Sparkles className="h-4 w-4 mr-2 text-yellow-400" />
                  Créations
                </Link>
              </Button>
              <Button asChild className="bg-gradient-to-r from-primary to-accent hover:opacity-90 transition-opacity">
                <Link to="/commander">Commander une chanson</Link>
              </Button>
            </div>

            <div className="md:hidden">
              <Button variant="ghost" onClick={toggleMobileMenu} size="icon">
                {mobileMenuOpen ? <X className="h-6 w-6" /> : <Menu className="h-6 w-6" />}
              </Button>
            </div>
          </div>

          <AnimatePresence>
            {mobileMenuOpen && (
              <motion.div
                variants={mobileMenuVariants}
                initial="hidden"
                animate="visible"
                exit="exit"
                className="md:hidden absolute top-full left-0 right-0 bg-background/95 backdrop-blur-md shadow-lg pb-4 border-t border-border"
              >
                <div className="container mx-auto px-4 py-2 flex flex-col items-end space-y-2">
                  <Button variant="ghost" asChild className="w-full justify-end" onClick={toggleMobileMenu}>
                    <Link to="/">Accueil</Link>
                  </Button>
                  <Button variant="ghost" asChild className="w-full justify-end" onClick={toggleMobileMenu}>
                     <Link to="/creations" className="flex items-center justify-end w-full">
                        <Sparkles className="h-4 w-4 mr-2 text-yellow-400" />
                        Créations
                      </Link>
                  </Button>
                  <Button asChild className="w-full justify-end bg-gradient-to-r from-primary to-accent hover:opacity-90 transition-opacity" onClick={toggleMobileMenu}>
                    <Link to="/commander">Commander une chanson</Link>
                  </Button>
                </div>
              </motion.div>
            )}
          </AnimatePresence>
        </nav>
      );
    };

    export default Navbar;