'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();

  // Controls component for both modes
  const Controls = () => (
    <div className='flex flex-row items-center'>
      <ThemeToggle className='mr-4' />
      {isAuthenticated && <AvatarDropdown />}
    </div>
  );

  if (tvMode) {
    return (
      <div className='absolute top-10 right-37'>
        <Controls />
      </div>
    );
  }

  return (
    <header className='w-full mb-8'>
      <div className='container mx-auto px-4 md:px-6 lg:px-20'>
        <div className='flex items-center justify-between'>
          {/* Left spacer for perfect centering */}
          <div className='flex flex-1 justify-start'>
            <div className='sm:w-[120px] md:w-[160px]' />
          </div>

          {/* Centered logo and title */}
          <div className='flex-shrink-0'>
            <Link
              href='/'
              scroll={false}
              className='flex flex-row items-center justify-center px-4'
            >
              <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>
          </div>

          {/* Right-aligned controls */}
          <div className='flex-1 flex justify-end'>
            <Controls />
          </div>
        </div>
      </div>
    </header>
  );
};

export default Header;