import React from "react"; // Import React
import { Link } from "react-router-dom"; // Import Link for routing
import { GiShoppingCart } from "react-icons/gi";
// import { FaShoppingCart } from "react-icons/fa"; // Import shopping cart icon

const Navbar1 = () => { // Define Navbar1 component
    return (
        <nav className="bg-white shadow-md px-8 py-3 flex justify-between items-center">
            <div className="text-[#AFA0D7] text-2xl font-firamono font-bold">
                <h1>ESKAYVIE</h1>
            </div>
            <div className="flex items-center">
                <ul className="text-purple-600 text-lg flex gap-10 mr-20">
                    <li><Link to="/" className="hover:text-purple-800 cursor-pointer text-[#9B8BC4]">Home</Link></li>
                    <li><Link to="/about" className="hover:text-purple-800 cursor-pointer text-[#9B8BC4]">About Us</Link></li>
                    <li className="relative group">
                        <div className="hover:text-purple-800 cursor-pointer text-[#9B8BC4]">Shop</div>
                        <div className="absolute left-0 mt-2 hidden group-hover:block bg-white shadow-lg rounded-lg w-auto z-50">
                            <ul className="py-2 text-sm text-gray-700">
                                <li><div className="block px-4 py-2 hover:bg-purple-50 cursor-pointer text-[#9B8BC4]">Health & Wellness</div></li>
                                <li><div className="block px-4 py-2 hover:bg-purple-50 cursor-pointer text-[#9B8BC4]">Beauty</div></li>
                                <li><div className="block px-4 py-2 hover:bg-purple-50 cursor-pointer text-[#9B8BC4]">Home & Living</div></li>
                                <li><div className="block px-4 py-2 hover:bg-purple-50 cursor-pointer text-[#9B8BC4]">Lifestyle</div></li>
                                <li><div className="block px-4 py-2 hover:bg-purple-50 cursor-pointer text-[#9B8BC4]">Sunnah Wellness</div></li>
                                <li><div className="block px-4 py-2 hover:bg-purple-50 cursor-pointer text-[#9B8BC4]">Merchandise</div></li>
                            </ul>
                        </div>
                    </li>
                    <li><Link to="/blog" className="hover:text-purple-800 cursor-pointer text-[#9B8BC4]">Blog</Link></li>
                    <li><Link to="/contact" className="hover:text-purple-800 cursor-pointer text-[#9B8BC4]">Contact Us</Link></li>
                </ul>
                <div className="flex items-center space-x-4">
                    <div className="text-purple-600 hover:text-purple-800 cursor-pointer">
                        <GiShoppingCart className="text-4xl" />
                    </div>
                    <button className="text-white px-5 py-1 rounded-lg hover:bg-purple-800 cursor-pointer shadow-lg bg-[#AFA0D7]">Login</button>
                </div>
            </div>
        </nav>
    );
}

export default Navbar1; // Export Navbar1 component