import { asset } from 'fresh/runtime'
import AiChatBox from ':islands/AiChatBox.tsx'
import MoreBox from ':islands/MoreBox.tsx'
import SearchBox from ':islands/SearchBox.tsx'
import ThemePicker from ':islands/ThemePicker.tsx'
import { getStyleScope, useSmartStylesheet } from ':plugins/SmartStylesheet.tsx'

const scope = getStyleScope(Header)

export function Header() {
	useSmartStylesheet(import.meta, { scope })

	return (
		<header class={scope}>
			<div>
				<span class='brand'>
					<a href='/'>
						<span class='brand__text'>Coh</span>
						<img src={asset('/assets/bulb.svg')} alt='a' />
						<span class='brand__text'>bit</span>
					</a>
				</span>
				<menu>
					<li>
						<a href='/machines' class='menu_button'>
							<i class='ri-hammer-line'></i>
							<span>Machines</span>
						</a>
					</li>
					<li>
						<a href='/projets' class='menu_button'>
							<i class='ri-organization-chart'></i>
							<span>Projets</span>
						</a>
					</li>
					<li>
						<a href='/blog' class='menu_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='/apps'>Apps</a>
								</li>
								<li>
									<a href='/docs'>Docs</a>
								</li>
							</ul>
						</details>
					</li>
				</menu>
				<SearchBox />
				<MoreBox>
					<ThemePicker />
					<a href='/profil' title='Accéder à mon compte'>
						<i class='ri-user-line'></i>
					</a>
					<AiChatBox />
				</MoreBox>
			</div>
		</header>
	)
}