// Path: Frontend/src/components/shell/TopBar/TopBar.tsx

import { For, type JSX } from "solid-js";
import { ChevronDown } from "../../../lib/icons";
import type { Theme } from "../../../theme/runtime";
import { topBarActions } from "../data/shell.data";
import styles from "./TopBar.module.scss";

type TopBarProps = {
	theme: Theme;
	onToggleTheme: VoidFunction;
};

export const TopBar = (props: TopBarProps): JSX.Element => {
	return (
		<header class={styles.topBar}>
			<div class={styles.identity}>
				<span class={styles.eyebrow}>Moku Work</span>
				<div class={styles.title}>
					<strong>Workspace Shell</strong>
					<span class={styles.context}>Moku / Product</span>
					<ChevronDown size={16} strokeWidth={2} />
				</div>
			</div>

			<button class={styles.themeButton} type="button" onClick={props.onToggleTheme}>
				<span class={styles.themeLabel}>{props.theme === "dark" ? "Dark" : "Light"}</span>
			</button>

			<div class={styles.actions}>
				<For each={topBarActions}>
					{(item): JSX.Element => {
						const Icon = item.icon;

						return (
							<button class={styles.actionButton} type="button" aria-label={item.label} title={item.label}>
								<Icon size={18} strokeWidth={2} />
							</button>
						);
					}}
				</For>
			</div>
		</header>
	);
};