/**
 * CollectorSelectInput
 *
 * Renders select option buttons with keyboard shortcuts for the
 * command input collection phase. Also handles boolean Y/N inputs.
 *
 * Extracted from CommandInputCollector.tsx in v1.4.0.
 *
 * @since 1.4.0
 */

'use client';

import React from 'react';
import type { SelectOption } from '../../commands/types';

// --- Types ---

export interface CollectorSelectInputProps {
	options: SelectOption[];
	onSelect: (value: string) => void;
}

export interface CollectorBooleanInputProps {
	onSelect: (value: boolean) => void;
}

// --- Shared Button ---

function ShortcutButton({
	shortcut,
	label,
	description,
	onClick,
}: {
	shortcut: string;
	label: string;
	description?: string;
	onClick: () => void;
}) {
	return (
		<button
			onClick={onClick}
			className="flex items-center gap-1 rounded px-2 py-0.5 text-sm transition-colors"
			style={{
				backgroundColor: 'var(--list-item-bg-hover)',
				color: 'var(--hud-text)',
			}}
			onMouseEnter={(e) => (e.currentTarget.style.backgroundColor = 'var(--list-item-border)')}
			onMouseLeave={(e) => (e.currentTarget.style.backgroundColor = 'var(--list-item-bg-hover)')}
			title={description}
		>
			<kbd
				className="rounded px-1 py-0.5 font-mono text-xs"
				style={{
					backgroundColor: 'var(--cmd-bg)',
					color: 'var(--badge-info-text)',
				}}
			>
				{shortcut.toUpperCase()}
			</kbd>
			<span>{label}</span>
		</button>
	);
}

// --- Components ---

export function CollectorSelectInput({ options, onSelect }: CollectorSelectInputProps) {
	return (
		<div className="flex items-center gap-2">
			{options.map((option) => (
				<ShortcutButton
					key={option.value}
					shortcut={option.shortcut}
					label={option.label}
					description={option.description}
					onClick={() => onSelect(option.value)}
				/>
			))}
		</div>
	);
}

export function CollectorBooleanInput({ onSelect }: CollectorBooleanInputProps) {
	return (
		<div className="flex items-center gap-2">
			<ShortcutButton shortcut="Y" label="Yes" onClick={() => onSelect(true)} />
			<ShortcutButton shortcut="N" label="No" onClick={() => onSelect(false)} />
		</div>
	);
}
