import React, { useEffect, useState } from 'react';
import SearchInputBox from './SearchInputBox';
import tsLogo from '../components/images/testsigma-logo-v3-dark.svg';

const Header = () => {
  const [isHomepage, setIsHomepage] = useState(false);

  useEffect(() => {
    setIsHomepage(window.location.pathname === '/tutorials/');
  }, []);
  return (
    <header id='root_header'>
      <div className='flex items-stretch header-container'>
        <a href={'/'} className='logo-block flex max-w-sm w-1/6'>
          <img src={tsLogo} alt='Testsigma' className='ml-10 my-6' />
        </a>
        <nav className='flex-auto flex  items-center'>
          <nav className='flex w-7/12'>
            <div className='flex items-stretch font-semibold ml-20'>
              <a
                className='btn btn-ghost btn-sm pr-2 rounded-btn'
                href={'/docs/'}
              >
                Docs
              </a>
              {isHomepage ? (
                <span className='btn btn-ghost btn-sm border-b-2 border-primary_teal_green rounded-btn ml-10 text-primary_teal_green'>
                  Tutorials
                </span>
              ) : (
                <a
                  className='btn btn-ghost btn-sm border-b-2 border-primary_teal_green rounded-btn ml-10 text-primary_teal_green'
                  href='/tutorials/'
                >
                  Tutorials
                </a>
              )}
              <a
                className='btn btn-ghost btn-sm rounded-btn ml-10'
                target={'_blank'}
                href={'https://github.com/Testsigmahq/testsigma/'}
              >
                GitHub
              </a>
              <a
                className='btn btn-ghost btn-sm rounded-btn ml-10'
                href={'https://discord.com/invite/5caWS7R6QX'}
              >
                Discord
              </a>
              <a
                className='btn btn-ghost btn-sm rounded-btn ml-10'
                href={'https://testsigma.com/pricing'}
              >
                Enterprise
              </a>
              <a
                className='btn btn-ghost btn-sm rounded-btn ml-10'
                href={'https://testsigma.com/'}
              >
                Testsigma Cloud
              </a>
            </div>
          </nav>
          <div className='search-block relative flex items-center justify-between w-2/5 pr-9'>
            <SearchInputBox></SearchInputBox>
            <a
              id={'signup-btn'}
              target={'_blank'}
              className='border border-primary_teal_green px-4 py-1.5 text-secondary_teal_green rounded'
              href='/signup'
            >
              GET STARTED FREE
            </a>
            <a
              id={'signup-btn'}
              target={'_blank'}
              className='border border-primary_teal_green px-4 py-1.5 base-teal-gradient text-white rounded'
              href='/request-demo'
            >
              BOOK A DEMO
            </a>
          </div>
        </nav>
      </div>
    </header>
  );
};

export default Header;