"use client";
import { useGetLogoQuery } from "@/Redux/Api/logoApi";
import Link from "next/link";
import { usePathname } from "next/navigation";
import React, { useState } from "react";
import { FaQuestionCircle, FaSearch, FaUserCircle } from "react-icons/fa";
import image from "@/assists/GooglePlaybestapp-right.png"
import Image from "next/image";

const Navbar = () => {
  const path = usePathname();
  const [open, setOpen] = useState(false);

  const { data: logoData, isLoading: isFetching } = useGetLogoQuery(undefined);

  const routes = [
    { route: "/", name: "Home" },
    { route: "/work", name: "Work" },
    { route: "/#faq", name: "FAQ" },
    { route: "/privacy-policy", name: "Privacy Policy" },
    { route: "/terms-conditions", name: "Terms & Conditions" },
    { route: "/about-us", name: "About Us" },
  ];

  return (
    <header className="border-b border-[#dadce0] sticky top-0 bg-white z-50">
      <div className={`container h-16 flex items-center justify-between`}>
        <div className="flex items-center gap-6">
          <div className="flex items-center gap-2">
            <svg width="40" height="40" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M7.1051 3.42173C6.39206 4.1687 5.97559 5.28929 5.97559 6.64966V41.3503C5.97559 42.7107 6.39206 43.8313 7.1051 44.5783L7.22847 44.6946L27.9734 23.9497V23.5936L7.22847 3.30536L7.1051 3.42173Z" fill="#EA4335" />
              <path d="M34.8879 30.8643L27.9731 23.9495V23.5934L34.8879 16.6786L35.0519 16.7725L43.2307 21.4172C45.5654 22.7401 45.5654 24.8115 43.2307 26.1343L35.0519 30.7788L34.8879 30.8643Z" fill="#FBBC04" />
              <path d="M35.0521 30.7785L27.9734 23.7712L7.22852 44.5161C7.99596 45.3308 9.27438 45.4227 10.7093 44.6075L35.0521 30.7785Z" fill="#4285F4" />
              <path d="M35.0521 16.7728L10.7093 2.94379C9.27438 2.1286 7.99596 2.22055 7.22852 3.03522L27.9734 23.7801L35.0521 16.7728Z" fill="#34A853" />
            </svg>
            <span className="text-xl font-medium text-[#5f6368]">Google Play</span>
          </div>
          {/* <nav className="hidden md:flex gap-6 text-sm font-medium text-[#5f6368]">
            <a href="#" className="hover:text-black">Games</a>
            <a href="#" className="hover:text-black">Apps</a>
            <a href="#" className="hover:text-black">Movies & TV</a>
            <a href="#" className="hover:text-black">Books</a>
            <a href="#" className="hover:text-black">Kids</a>
          </nav> */}
        </div>
        <div className="flex items-center gap-4 text-[#5f6368]">
          <Image src={image} alt="Google Play Logo" width={150} height={40} />
        </div>
      </div>
    </header>
  );
};

export default Navbar;
