import type { ComponentProps } from 'react';
import { Kanit } from 'next/font/google';
import Image from 'next/image';
import Link from 'next/link';
import { Coffee, Server, Wrench } from 'lucide-react';

import { Controls } from './controls';

const kanitSans = Kanit({
  subsets: ['latin'],
  weight: ['400', '500', '600', '700'],
});

export default function Header(headerProps: ComponentProps<'header'>) {
  return (
    <header
      className='border-border/40 bg-background/95 supports-backdrop-filter:bg-background/60 sticky top-0 z-50 w-full border-b backdrop-blur'
      {...headerProps}
    >
      <div className='container mx-auto flex h-16 items-center justify-between px-4 md:px-6'>
        {/* Logo */}
        <Link
          href='/'
          className='to-accent-foreground flex items-center gap-2 bg-linear-to-r from-[#281A65] via-[#363354] bg-clip-text text-transparent transition-opacity hover:opacity-80 dark:from-[#bec8e6] dark:via-[#F0EEE4] dark:to-[#FFF8E7]'
        >
          <Image
            src='/misc/convex/convex-symbol-white.svg'
            alt='Convex Monorepo'
            width={50}
            height={50}
            className='w-15 invert dark:invert-0'
          />
          <span
            className={`mb-3 hidden font-extrabold lg:inline lg:text-5xl ${kanitSans.className}`}
          >
            convex monorepo
          </span>
        </Link>

        {/* Navigation */}
        <nav className='hidden items-center gap-6 text-base font-medium md:flex'>
          <Link
            href='/#features'
            className='text-foreground/60 hover:text-foreground flex items-center gap-2 transition-colors'
          >
            <Wrench width={18} height={18} />
            Features
          </Link>
          <Link
            href='/#tech-stack'
            className='text-foreground/60 hover:text-foreground flex items-center gap-2 transition-colors'
          >
            <Server width={18} height={18} />
            Stack
          </Link>
          <Link
            href='https://git.gbrown.org/gib/convex-monorepo'
            target='_blank'
            rel='noopener noreferrer'
            className='text-foreground/60 hover:text-foreground flex items-center gap-2 transition-colors'
          >
            <Coffee width={20} height={20} />
            Repository
          </Link>
        </nav>

        {/* Controls (Theme + Auth) */}
        <Controls />
      </div>
    </header>
  );
}