import { asset } from '$fresh/runtime.ts'
import SearchBox from '../islands/SearchBox.tsx'
import ThemePicker from '../islands/ThemePicker.tsx'

export function Header() {
	return (
		<header>
			<div>
				<span class='components__header__brand'>
					<a href='/'>
						<span class='components__header__brand__text'>Coh</span>
						<img src={asset('/assets/bulb.svg')} alt='a' />
						<span class='components__header__brand__text'>bit</span>
					</a>
				</span>
				<nav>
					<li>
						<a href='/machines' class='components__header__nav_button'>
							<i class='ri-hammer-line'></i>
							<span>Machines</span>
						</a>
					</li>
					<li>
						<a href='/projets' class='components__header__nav_button'>
							<i class='ri-organization-chart'></i>
							<span>Projets</span>
						</a>
					</li>
					<li>
						<a href='/blog' class='components__header__nav_button'>
							<i class='ri-question-answer-line'></i>
							<span>Blog</span>
						</a>
					</li>
					<li>
						<details>
							<summary>
								<i class='ri-function-line'></i>
								<span>Fablab</span>
							</summary>
							<ul>
								<li>
									<a href='/membres'>Membres</a>
								</li>
								<li>
									<a href='https://projets.cohabit.fr' target='_blank'>
										Redmine
									</a>
								</li>
								<li>
									<a href='https://git.cohabit.fr' target='_blank'>Git</a>
								</li>
								<li>
									<a
										href='https://matrix.to/#/!thtlRrlXFrbifqMNCG:matrix.org?via=matrix.org'
										target='_blank'
									>
										Matrix
									</a>
								</li>
							</ul>
						</details>
					</li>
				</nav>
				<SearchBox />
				<ThemePicker />
			</div>
		</header>
	)
}