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>
            <a style={{ color: '#374151', textDecoration: 'none' }}>Ballistic Builder</a>
          </NextLink>
        </h1>
        <nav style={{ display: 'flex', gap: '24px' }}>
          <NextLink href="/builder" passHref>
            <a style={{ color: '#374151', textDecoration: 'underline' }}>Builder</a>
          </NextLink>
          <NextLink href="/products" passHref>
            <a style={{ color: '#374151', textDecoration: 'underline' }}>Products</a>
          </NextLink>
          <NextLink href="/auth/signin" passHref>
            <a style={{ color: '#374151', textDecoration: 'underline' }}>Sign In</a>
          </NextLink>
        </nav>
      </div>
    </header>
  );
};

export default Header;