/** 빠른 실행 단추(↶ ↷) — 리본 탭 줄 오른쪽(접기 단추 앞)에 그린다 · 아이콘 단추 부품(단 20) · 숨김 목록은 DOM 만 둔다 */
import type { FC } from 'react';
import { getCommandById } from '../commands/registry';
import { runCommand } from '../commands/run-command';
import { QUICK_ACCESS_COMMANDS, QUICK_ACCESS_HIDDEN } from '../ribbon/ribbon.config';
import { isHostSave } from '../state';

export const QuickAccessBar: FC = () => {
	// 부모 [저장]이 맡는 M02 는 우하단 ViewControls 에 ↶ ↷ 가 있어 안 그린다
	if (isHostSave()) return null;
	return (
		<div className="cad-quick-access">
			{QUICK_ACCESS_COMMANDS.map((id) => {
				const command = getCommandById(id);
				if (!command) return null;
				return (
					<button
						type="button"
						className="ui-icon-btn ui-icon-btn--ghost"
						data-size="20"
						aria-label={command.label}
						key={command.id}
						hidden={QUICK_ACCESS_HIDDEN.includes(id)}
						title={`${command.label} (${command.id})`}
						onClick={() => runCommand(command)}
					>
						<span aria-hidden>{command.glyph}</span>
					</button>
				);
			})}
		</div>
	);
};