import NextLink from 'next/link';

const Header: React.FC = () => {
  return (
    (<header style={{ backgroundColor: '#7C8C58', color: 'white', padding: '16px 24px', boxShadow: '0 4px 6px rgba(0, 0, 0, 0.1)' }}>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', maxWidth: '80rem', margin: '0 auto' }}>
        <h1 style={{ fontSize: '1.5rem', }}>
          <NextLink href="/" passHref style={{ color: '#FFFFFF', textDecoration: 'none' }}>
            Ballistic Builder
          </NextLink>
        </h1>
        <nav style={{ display: 'flex', gap: '24px' }}>
          <NextLink
            href="/Builder"
            passHref
            style={{ color: '#FFFFFF', textDecoration: 'underline' }}>
            Builder
          </NextLink>
          <NextLink
            href="/Products"
            passHref
            style={{ color: '#FFFFFF', textDecoration: 'underline' }}>
            Products
          </NextLink>
          <NextLink
            href="/auth/signin"
            passHref
            style={{ color: '#FFFFFF', textDecoration: 'underline' }}>
            Sign In
          </NextLink>
        </nav>
      </div>
    </header>)
  );
};

export default Header;