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

import { For, Show, type JSX } from "solid-js";
import { useAppShellData } from "../data/app-shell.context";
import styles from "./ServerDock.module.scss";

export const ServerDock = (): JSX.Element => {
	const appShellData = useAppShellData();
	const activeServer = () => appShellData.activeServer();

	return (
		<section class={styles.panel} aria-label="Server dock" data-ui="server-dock" data-server-kind={activeServer().kind}>
			<div class={styles.identity} data-slot="server-dock-identity">
				<div class={styles.glyph} aria-hidden="true">
					{activeServer().abbreviation}
				</div>
				<div class={styles.copy} data-slot="server-dock-copy">
					<span class={styles.name}>{activeServer().name}</span>
					<Show
						when={activeServer().kind === "organization"}
						fallback={<span class={styles.subtitle}>{activeServer().subtitle}</span>}
					>
						<span class={styles.status}>
							<span class={styles.statusDot} aria-hidden="true" />
							<span>{activeServer().connectedLabel}</span>
						</span>
					</Show>
				</div>
			</div>

			<Show when={activeServer().dockActions.length > 0}>
				<div class={styles.actions} data-slot="server-dock-actions">
					<For each={activeServer().dockActions}>
						{(item): JSX.Element => {
							const Icon = item.icon;

							return (
								<button type="button" class={styles.action} aria-label={item.label} title={item.label} data-slot="server-dock-action" data-action-id={item.id}>
									<Icon size={16} strokeWidth={2} />
									<span class={styles.actionLabel}>{item.label}</span>
								</button>
							);
						}}
					</For>
				</div>
			</Show>
		</section>
	);
};