Untitled

'use client';
import LeftSideDrawer from '@/components/Global/LeftSideDrawer';
import AuthModal from '@/components/Modal/AuthModal';
import { xoomBackendUrl } from '@/lib/axios/getAxios';
import { signOut, useSession } from 'next-auth/react';
import Image from 'next/image';
import Link from 'next/link';
import { usePathname } from 'next/navigation';
import { useEffect, useState } from 'react';
import toast from 'react-hot-toast';
import { FaCrown } from 'react-icons/fa';

export default function Header() {
  const pathname = usePathname();
  // Get initial state from local storage or provide default values
  // const [siteSettings, ] = useState(initialSiteSettings);
  const [siteSettings, setSiteSettings] = useState({});
  const { data: session } = useSession();

  const handleLogout = async () => {
    await signOut({
      redirect: false,
      callbackUrl: '/',
    });
    toast.success('Signed out successfully!');
  };

  const isCurrentPath = (path) => pathname.includes(path);


  useEffect(() => {

    async function getSettings() {
      try {
        const { data } = await xoomBackendUrl.get(
          '/api/admin/administration-settings'
        );

        if (data?.data !== null) {

          // Extract only the required properties
          const { site_logo, site_icon } = data.data;

          // Store data in local storage
          localStorage.setItem('siteSettings', JSON.stringify({ site_logo, site_icon }));
          const initialSiteSettings = JSON.parse(localStorage.getItem('siteSettings')) || {};
          setSiteSettings(initialSiteSettings)
          // setLogoImage(data?.data?.site_logo);
        }
      } catch (error) {
        console.error('Error fetching general settings:', error);
      }
    }
    getSettings();
  }, []);

  return (
    <header>
      <div className="relative w-full mx-auto h-[75px] bg-primary hidden sm:block ">
        <div className="absolute -top-10 z-40 inset-0 bg-[url('/images/bgimage_2.png')] transform -skew-y-[0.5deg] origin-bottom-right  bg-cover bg-center bg-no-repeat "></div>
        <div className="relative z-50 max-w-screen-xl p-4 mx-auto top-0 ">
          <div className="flex items-center justify-between">
            <Link
              href="/"
              className="flex items-center text-xl font-semibold text-white uppercase max-h-16"
            >
              {/* <span className="text-secondary">x</span>
              <BiFootball className="animate-bounce" />  bg-[#0F8A19]
              <BiFootball className="text-secondary animate-bounce [animation-delay:-0.3s]" />
              mSp
              <BiFootball className="animate-spin" />
              rts */}

              <Image
                src="/images/Logo_l.png" // 
                alt="Logo"
                width={210} // Desired width
                height={70} // Desired height
              />
              {/* {siteSettings.site_logo ? (
                <Image
                  src={siteSettings.site_logo}
                  alt="Site Logo"
                  width={200}
                  height={160}
                />
              ) : (
                // Default image when site_logo is not available
                <Image
                  src="/images/Logo_l.png"
                  alt="Default Logo"
                  width={200}
                  height={160}
                />
              )} */}
            </Link>
            <ul className="flex items-center gap-2 lg:gap-5 text-md lg:text-lg text-white uppercase md:gap-3">
              <Link
                className={` ${pathname === '/' || isCurrentPath('/match')
                  ? "text-warning after:content-['_-'] after:absolute relative after:top-4 after:text-warning after:left-11"
                  : 'text-white hover:text-warning'
                  }`}
                href="/"
              >
                matches
              </Link>
              <Link
                className={` ${isCurrentPath('/favorites')
                  ? "text-warning after:content-['_-'] after:absolute relative after:top-4 after:text-warning after:left-12"
                  : 'text-white hover:text-warning'
                  }`}
                href="/favorites"
              >
                favorites
              </Link>
              <Link
                className={` ${isCurrentPath('/watch')
                  ? "text-warning after:content-['_-'] after:absolute relative after:top-4 after:text-warning after:left-8"
                  : 'text-white hover:text-warning'
                  }`}
                href="/watch"
              >
                watch
              </Link>
              <Link
                className={` ${isCurrentPath('/news')
                  ? "text-warning after:content-['_-'] after:absolute relative after:top-4 after:text-warning after:left-6"
                  : 'text-white hover:text-warning'
                  }`}
                href="/news"
              >
                news
              </Link>
              <Link
                className={`flex items-center ${isCurrentPath('/subscription')
                  ? "text-warning after:content-['_-'] after:absolute relative after:top-4 after:text-warning after:left-14"
                  : 'text-white hover:text-warning'
                  }`}
                href="/subscription"
              >
                <FaCrown className="mr-1 text-xl text-yellow-400" /> premium
              </Link>
              {/* 
              <label
                onClick={() => window.subscriptionModal.showModal()}
                className="flex items-center text-white cursor-pointer hover:text-warning"
                style={{ textDecoration: 'none' }}
              >
                <FaCrown className="mr-1 text-xl text-yellow-400" /> premium
              </label> */}
              {session ? (
                <>
                  <div className="dropdown dropdown-end">
                    <div
                      tabIndex={0}
                      role="button"
                      className="btn btn-ghost btn-circle btn-sm avatar ring-2 ring-white"
                    >
                      <div className="w-10 rounded-full">
                        {session?.user?.image ? (
                          <Image
                            src={session?.user?.image}
                            alt="User Profile"
                            height={40}
                            width={40}
                          />
                        ) : (
                          <Image
                            src="/images/default_profile.png"
                            alt="User Profile"
                            height={40}
                            width={40}
                          />
                        )}
                      </div>
                    </div>
                    <ul
                      tabIndex={0}
                      className="menu menu-sm dropdown-content mt-3 z-[1] p-2 shadow-md bg-primary rounded-md border border-gray-200 w-52"
                    >
                      <div className="flex items-center gap-2 px-2 py-1 font-medium">
                        <span className="text-white hover:text-secondary">
                          {session?.user?.name}
                        </span>{' '}
                        <span className="badge badge-outline">Free</span>
                      </div>
                      <li className="px-2 py-1 font-medium text-white hover:text-secondary ">
                        Settings
                      </li>
                      <li
                        className="w-full mx-auto mt-3 rounded-md btn btn-sm btn-error"
                        onClick={handleLogout}
                      >
                        Logout
                      </li>
                    </ul>
                  </div>
                </>
              ) : (
                <label
                  onClick={() => window.authModal.showModal()}
                  className="text-white cursor-pointer hover:text-warning"
                >
                  sign in
                </label>
              )}
            </ul>
          </div>
        </div>
      </div>
      <div className="block sm:hidden">
        <LeftSideDrawer session={session} handleLogout={handleLogout} />
      </div>
      {/* Modals */}
      <AuthModal />
      {/* <SubscriptionModal /> */}
    </header>
  );
}