'use client';
import Image from 'next/image';
import { TVToggle, useTVMode } from '@/components/context/TVMode';
import { ThemeToggle } from '@/components/context/Theme';
import AvatarDropdown from '@/components/auth/AvatarDropdown';
import { useAuth } from '@/components/context/Auth'

const Header = () => {
  const { tvMode } = useTVMode();
  const { session, user, loading } = useAuth();

  if (tvMode) {
    return (
      <div className='w-full flex flex-row items-end justify-end'>
        <div
          className='flex flex-row my-auto items-center
          justify-center pt-2 pr-0 sm:pt-4 sm:pr-8'
        >
          <ThemeToggle />
          {session && !loading && (
            <div
              className='flex flex-row my-auto items-center
              justify-center'
            >
              <div className='mb-0.5 ml-4'>
                <TVToggle width={22} height={22} />
              </div>
              <AvatarDropdown />
            </div>
          )}
        </div>
      </div>
    );
  } else {
    return (
      <header className='w-full min-h-[10vh]'>
        <div className='w-full flex flex-row items-end justify-end'>
          <div
            className='flex flex-row my-auto items-center
            justify-center pt-2 pr-0 sm:pt-4 sm:pr-8'
          >
            <ThemeToggle />
            {session && !loading && (
              <div
                className='flex flex-row my-auto items-center
                justify-center'
              >
                <div className='mb-0.5 ml-4'>
                  <TVToggle width={22} height={22} />
                </div>
                <AvatarDropdown />
              </div>
            )}
          </div>
        </div>
        <div
          className='flex flex-row items-center text-center
            justify-center'
        >
          <Image
            src='/images/tech_tracker_logo.png'
            alt='Tech Tracker Logo'
            width={100}
            height={100}
            className='max-w-[40px] md:max-w-[120px]'
          />
          <h1
            className='title-text text-xl sm:text-4xl md:text-6xl lg:text-8xl
            bg-gradient-to-r dark:from-[#bec8e6] dark:via-[#F0EEE4]
            dark:to-[#FFF8E7] from-[#2e3266] via-slate-600 to-zinc-700
            font-bold pl-2 md:pl-12 text-transparent bg-clip-text'
          >
            Tech Tracker
          </h1>
        </div>
      </header>
    );
  }
};
export default Header;