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

import { For, type JSX } from "solid-js";
import { Plus } from "../../../lib/icons";
import { railItems } from "../data/shell.data";
import styles from "./LeftRail.module.scss";

export const LeftRail = (): JSX.Element => {
	return (
		<aside class={styles.rail} aria-label="Workspace rail">
			<div class={styles.topCluster}>
				<div class={styles.logo} aria-hidden="true">
					M
				</div>
			</div>

			<div class={styles.items}>
				<For each={railItems}>
					{(item): JSX.Element => (
						<button
							type="button"
							classList={{
								[styles.workspaceButton]: true,
								[styles.workspaceButtonActive]: !!item.active,
							}}
							title={item.label}
							aria-label={item.label}
						>
							{item.abbreviation}
						</button>
					)}
				</For>
			</div>

			<div class={styles.bottomCluster}>
				<button type="button" class={styles.addButton} aria-label="Create workspace" title="Create workspace">
					<Plus size={16} strokeWidth={2} />
				</button>
			</div>
		</aside>
	);
};