'use client';
import Image from 'next/image';
import Link from 'next/link';
import { useTVMode } from '@/components/providers';
import { cn } from '@/lib/utils';
import { type ComponentProps } from 'react';
import { Controls } from './controls';

const Header = (headerProps: ComponentProps<'header'>) => {
  const { tvMode } = useTVMode();

  if (tvMode)
    return (
      <header
        {...headerProps}
        className={cn(
          'w-full px-4 md:px-6 lg:px-20 my-8',
          headerProps?.className,
        )}
      >
        <div className='flex-1 flex justify-end mt-5'>
          <Controls />
        </div>
      </header>
    );

  return (
    <header
      {...headerProps}
      className={cn(
        'w-full px-4 md:px-6 lg:px-20 my-8',
        headerProps?.className,
      )}
    >
      <div className='flex items-center justify-between'>
        {/* Left spacer for perfect centering */}
        <div className='flex flex-1 justify-start' />

        {/* 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>
    </header>
  );
};
export default Header;