/**
 * Selection mode (canvas "1 · Editor"): the canvas body gives way to a grid of
 * square checkbox thumbnails, one per item the editor lets the user pick. A
 * click or Space toggles a thumbnail; the editor's toggle receives Shift for a
 * range. Styled by `_selection-grid.scss`.
 */

/**
 * @typedef {{ key: number, src: string, name: string }} SelectionGridThumb
 */

/**
 * @param {Object}                                                props
 * @param {SelectionGridThumb[]}                                  props.thumbs     Items in canvas order; `name` is each checkbox's accessible name.
 * @param {string}                                                props.label      The group's accessible name ("Select images").
 * @param {(key: number) => boolean}                              props.isSelected
 * @param {(key: number, options: { shiftKey: boolean }) => void} props.onToggle
 */
export default function SelectionGrid({ thumbs, label, isSelected, onToggle }) {
	return (
		<div
			className="modula-takeover__selection-grid"
			role="group"
			aria-label={label}
		>
			{thumbs.map((thumb) => (
				<button
					key={thumb.key}
					type="button"
					role="checkbox"
					aria-checked={isSelected(thumb.key)}
					aria-label={thumb.name}
					className="modula-takeover__selection-thumb"
					onClick={(event) =>
						onToggle(thumb.key, { shiftKey: event.shiftKey })
					}
				>
					{thumb.src ? (
						<img src={thumb.src} alt="" loading="lazy" />
					) : null}
					<span
						className="modula-takeover__selection-thumb-check"
						aria-hidden="true"
					>
						<svg
							width="14"
							height="14"
							viewBox="0 0 24 24"
							fill="none"
							stroke="currentColor"
							strokeWidth="2"
							strokeLinecap="round"
							strokeLinejoin="round"
							focusable="false"
						>
							<path d="M5 12l5 5 9-10" />
						</svg>
					</span>
				</button>
			))}
		</div>
	);
}