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

import { For, Show, type JSX } from "solid-js";
import { workspaceSidebarItems } from "../data/shell.data";
import styles from "./WorkspaceSidebar.module.scss";

export const WorkspaceSidebar = (): JSX.Element => {
	return (
		<aside class={styles.sidebar} aria-label="Workspace navigation">
			<div class={styles.header}>
				<span class={styles.eyebrow}>Workspace</span>
				<h2 class={styles.title}>Product Operations</h2>
				<p class={styles.meta}>A barebone shell for Moku’s first real workspace layout.</p>
			</div>

			<div class={styles.section}>
				<span class={styles.sectionLabel}>Navigation</span>
				<div class={styles.navScroller}>
					<ul class={styles.navList} role="list">
						<For each={workspaceSidebarItems}>
							{(item): JSX.Element => {
								const Icon = item.icon;

								return (
									<li>
										<button
											type="button"
											classList={{
												[styles.navItem]: true,
												[styles.navItemActive]: !!item.active,
											}}
										>
											<Icon class={styles.icon} size={18} strokeWidth={2} />
											<span class={styles.label}>{item.label}</span>
											<Show when={item.meta}>
												<span class={styles.itemMeta}>{item.meta}</span>
											</Show>
										</button>
									</li>
								);
							}}
						</For>
					</ul>
				</div>
			</div>
		</aside>
	);
};