'use client';

import Image from 'next/image';
import Link from 'next/link';
import { ThemeToggle, useTVMode } from '@/components/context';
import { useAuth } from '@/components/context';
import AvatarDropdown from './AvatarDropdown';

const Header = () => {
  const { tvMode } = useTVMode();
  const { isAuthenticated } = useAuth();
  return tvMode ? (
    <div className='w-full py-2 pt-6 md:py-5'>
      <div className='absolute top-8 right-24'>
        <div className='flex flex-row my-auto items-center pt-2 pr-0 md:pt-4'>
          {isAuthenticated && <AvatarDropdown />}
        </div>
      </div>
    </div>
  ) : (
    <header className='w-full py-2 pt-6 md:py-5'>
      <div className='absolute top-8 right-16'>
        <div className='flex flex-row my-auto items-center pt-2 pr-0 md:pt-4 md:pr-8'>
          <ThemeToggle className='mr-4' />
          {isAuthenticated && <AvatarDropdown />}
        </div>
      </div>
      <Link
        href='/'
        scroll={false}
        className='flex flex-row items-center text-center
					justify-center sm:ml-0 p-4 mt-10 sm:mt-0'
      >
        <Image
          src='/favicon.png'
          alt='Tech Tracker Logo'
          width={100}
          height={100}
          className='max-w-[40px] md:max-w-[120px]'
        />
        <h1
          className='title-text text-sm md:text-4xl lg:text-8xl
					bg-gradient-to-r from-[#281A65] via-[#363354] to-accent-foreground dark:from-[#bec8e6] dark:via-[#F0EEE4] dark:to-[#FFF8E7]
					font-bold pl-2 md:pl-12 text-transparent bg-clip-text'
        >
          Tech Tracker
        </h1>
      </Link>
    </header>
  );
};
export default Header;