import "./header.css"

import { Link, navigate } from "gatsby"
import { useState } from "react"

import Logo from "@/images/global/logo.svg"


const Header = () => {
    const [ query, setQuery ] = useState('')
    return (
        <header>
            <div className="inner">
                <div>
                    <Link to="/"><img src={Logo} alt="OpenLaw NZ logo" /></Link>
                </div>
                <nav>
                    <Link to="/our-mission" activeClassName="active">Our Mission</Link>
                    <Link to="/how-to-use" activeClassName="active">How to Use</Link>
                    <Link to="/news" activeClassName="active">News</Link>
                </nav>
                <form method="get" onSubmit={(e) => {
                        e.preventDefault()

                        navigate(`/search?q=${query}`)
                    }}>
                    <div id="search-simple">
                        <label className="show-for-sr" htmlFor="top-search">Search 30k cases</label>
                        <input type="search" placeholder="Search 30k cases" name="q" id="top-search" value={query} onChange={e => setQuery(e.target.value)} required />
                        <button type="submit">
                            Search
                        </button>
                    </div>
                    <div id="search-options">
                        <Link to="/search">Advanced Search</Link>
                    </div>
                </form>
            </div>
        </header>
    )
}

export default Header