Untitled

'use client';

import Link from 'next/link';
import { usePathname } from 'next/navigation';
import { BiFootball, BiWorld } from 'react-icons/bi';
import { CiSearch, CiYoutube } from 'react-icons/ci';
import { FaFacebookF } from 'react-icons/fa';
import { HiMenuAlt2 } from 'react-icons/hi';
import { IoIosArrowDown } from 'react-icons/io';
import { IoLogoInstagram } from 'react-icons/io5';
export const AsiaSportsHeader = () => {
  const pathname = usePathname();
  //   const { data: session } = useSession();

  //   const handleLogout = async () => {
  //     await signOut({
  //       redirect: false,
  //       callbackUrl: '/',
  //     });
  //     toast.success('Sign Out Successfully!');
  //   };

  return (
    <header>
      <div className="">
        {/* First header */}
        <div className="bg-[#061626] ">
          <div className=" flex items-center py-2 justify-end mx-auto max-w-screen-xl">
            <div className="flex gap-8 ">
              <div className="flex justify-end gap-4">
                <div className="w-6 h-6 rounded-full flex justify-center items-center ring-1 ring-blue-500">
                  <FaFacebookF className="text-white text-sm" />
                </div>
                <div className="w-6 h-6 rounded-full flex justify-center items-center ring-1 ring-blue-500">
                  <IoLogoInstagram className="text-white text-sm" />
                </div>
                <div className="w-6 h-6 rounded-full flex justify-center items-center ring-1 ring-blue-500">
                  <CiYoutube className="text-white text-sm" />
                </div>
              </div>
              <div className="flex gap-8">
                {/* {session ? (
                  <label className="text-blue-500 hover:text-white cursor-pointer">
                    sign out
                  </label>
                ) : ( */}
                <label
                  // onClick={() => window.authModal.showModal()}
                  className="text-blue-500 hover:text-white cursor-pointer"
                >
                  Sign in
                </label>
                {/* )} */}

                <div className="flex items-center">
                  <div>
                    <BiWorld className="text-blue-500 text-2xl bg-gray-500 rounded-full " />
                  </div>
                  <div className="dropdown dropdown-end">
                    <div tabIndex={0} role="button" className="">
                      <IoIosArrowDown className="text-white text-2xl" />
                    </div>
                    <ul
                      tabIndex={0}
                      className="menu dropdown-content z-[2000] p-2  bg-white rounded-md w-52 mt-4"
                    >
                      <li>
                        <a>Item 1</a>
                      </li>
                      <li>
                        <a>Item 2</a>
                      </li>
                    </ul>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>

        {/* Second Header */}

        <div className="relative w-full mx-auto hidden sm:block ">
          <div className="absolute z-40 inset-0  bg-[#0052B5] transform  origin-bottom-right"></div>
          <div className="relative  z-50 mx-auto max-w-screen-xl">
            <div className="flex items-center justify-between ">
              <Link
                href="/"
                className="text-white text-2xl md:text-3xl uppercase font-semibold flex items-center"
              >
                <BiFootball className="animate-bounce" />
              </Link>
              <ul className="flex items-center gap-3 md:gap-5 text-lg uppercase text-white">
                <Link
                  className={` ${
                    pathname === '/'
                      ? "text-white after:content-['_-'] after:absolute relative after:top-4 after:text-white after:left-11"
                      : 'text-gray-300 hover:text-white'
                  }`}
                  href="/"
                >
                  matches
                </Link>
                <Link
                  className={` ${
                    pathname === '/favorites'
                      ? "text-white after:content-['_-'] after:absolute relative after:top-4 after:text-white after:left-11"
                      : 'text-gray-300 hover:text-white'
                  }`}
                  href="/favorites"
                >
                  favorites
                </Link>
                <Link
                  className={` ${
                    pathname === '/watch'
                      ? "text-white after:content-['_-'] after:absolute relative after:top-4 after:text-white after:left-11"
                      : 'text-gray-300 hover:text-white'
                  }`}
                  href="/watch"
                >
                  watch
                </Link>
                <Link
                  className={` ${
                    pathname === '/news'
                      ? "text-white after:content-['_-'] after:absolute relative after:top-4 after:text-white after:left-11"
                      : 'text-gray-300 hover:text-white'
                  }`}
                  href="/news"
                >
                  news
                </Link>
                <button className="btn rounded-none border-none h-full text-white bg-[#3388FF] font-normal">
                  Search
                  <CiSearch className="text-xl font-bold" />
                </button>
              </ul>
            </div>
          </div>
        </div>
        <div className="block sm:hidden">
          <div className="flex items-center justify-between h-[75px] bg-gray-200 p-3">
            <h4 className="text-gray-800 text-2xl uppercase font-semibold">
              <span className="text-secondary">x</span>oom sports
            </h4>
            <button>
              <HiMenuAlt2 className="text-2xl text-secondary" />
            </button>
          </div>
        </div>
      </div>
    </header>
  );
};