'use client';

import Image from 'next/image';
import Link from 'next/link';
import type { ComponentProps } from 'react';
import { Controls } from './controls';

export default function Header(headerProps: ComponentProps<'header'>) {
  return (
    <header
      className='w-full px-4 md:px-6 lg:px-20 my-8'
      {...headerProps}
    >
      <div className='flex items-center justify-between'>
        <div className='flex flex-1 justify-start'/>
        <div className='shrink-0'>
          <Link
            href='/'
            scroll={false}
            className='flex flex-row items-center justify-center px-4'
          >
            <Image
              src='/favicon.ico'
              alt='Convex Monorepo Logo'
              width={100}
              height={100}
              className='w-10 md:w-[120px]'
            />
            <h1
              className='title-text text-base md:text-4xl lg:text-8xl
              bg-linear-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'
            >
              Convex Monorepo
            </h1>
          </Link>

        </div>

        <div className='flex-1 flex justfiy-end'>
          <Controls />
        </div>
      </div>
    </header>
  );
};

