/** 제목표시줄 + 빠른 실행 도구막대 (AutoCAD 상단 막대) */
import type { FC } from 'react';
import { getCommandById } from '../commands/registry';
import { runCommand } from '../commands/run-command';
import { QUICK_ACCESS_COMMANDS } from '../ribbon/ribbon.config';

export const QuickAccessBar: FC = () => (
	<header className="cad-titlebar controls">
		<div className="cad-brand">
			<strong>Aislo CAD</strong>
			<span>B07 상세 설계</span>
		</div>
		<div className="cad-quick-access">
			{QUICK_ACCESS_COMMANDS.map((id) => {
				const command = getCommandById(id);
				if (!command) return null;
				return (
					<button
						type="button"
						key={command.id}
						title={`${command.label} (${command.id})`}
						onClick={() => runCommand(command)}
					>
						<span aria-hidden>{command.glyph}</span>
					</button>
				);
			})}
		</div>
		<div className="cad-file-state">
			<span className="cad-file-state__dot" />
			현재 도면
		</div>
	</header>
);