import { useSidebar } from '@/lib/context/SidebarContext';
import { useScreenDetector } from '@/lib/hooks/useScreenDetector';
import Image from 'next/image';
import Link from 'next/link';
import { useRouter } from 'next/router';
import { CiMenuFries } from 'react-icons/ci';
import { useSession } from 'next-auth/react';
import style from './index.module.scss';

interface HeaderProps {
  onClick?: () => void;
}

const Header = ({ onClick }: HeaderProps) => {
  const { isMobile, isTablet } = useScreenDetector();
  const { isOpen } = useSidebar();
  const router = useRouter();
  const { data: session } = useSession();
  const currentUser = session?.user?.user
  const userName = currentUser?.full_name || 'Guest';
  const userImage = currentUser?.image?.file || '/images/users/booking-user-1.png';

  return (
    <div className={` ${isOpen && 'px-sm-5 px-1'}  ${style.header}`}>
      <div className="d-flex justify-content-between align-items-center">
        <div className="d-flex justify-content-center align-items-center gap-2">
          <CiMenuFries size={22} onClick={onClick} />
          <h4 className={`mb-0  ${isMobile ? 'fs-6' : 'fs-3'}  text-black`}>
            Welcome To{' '}
            <span className="text-primary-color text-uppercase fw-bolder">
              Deliver X
            </span>
          </h4>
        </div>

        <div className="d-flex justify-content-center align-items-center gap-2">
          <div
            onClick={() => router.push('/user/notifications')}
            className={`${style.notificationIcon} cursor-pointer`}
          >
            <Image
              width={25}
              height={25}
              src="/images/icons/notification.png"
              alt="Notifications"
            />
          </div>

          <Link
            className="d-flex justify-content-center align-items-center"
            href={`/${router.pathname.includes('carrier') ? 'carrier' : 'user'}/my-profile`}
          >
            <div className={`${style.userIcon} border-0`}>
            <img src={`${process.env.NEXT_PUBLIC_MEDIA_URL}${userImage}`} alt="User" />
            </div>
            {!isTablet && (
              <h4 className="mb-0 fs-11 fw-bold cursor-pointer">
                {userName}
              </h4>
            )}
          </Link>
        </div>
      </div>
    </div>
  );
};

export default Header;