"use client";

export function RoomQuickEntry() {
	return (
		<form
			action="/client"
			method="GET"
			className="hidden sm:flex items-center gap-1"
			onSubmit={(e) => {
				const form = e.currentTarget;
				const input = form.elements.namedItem(
					"roomId",
				) as HTMLInputElement | null;
				if (input?.value) {
					form.action = `/room/${input.value}`;
				}
			}}
		>
			<input
				type="number"
				name="roomId"
				placeholder="Room ID"
				aria-label="Room ID"
				min={1}
				className="w-20 rounded-lg border px-2 py-1 text-xs font-medium"
				style={{
					background: "var(--color-background)",
					color: "var(--color-text-readable)",
					borderColor:
						"color-mix(in srgb, var(--color-text-muted) 25%, transparent)",
				}}
			/>
			<button
				type="submit"
				className="rounded-lg px-2 py-1 text-xs font-bold transition-colors"
				style={{
					background:
						"color-mix(in srgb, var(--color-primary) 20%, transparent)",
					color: "var(--color-primary-readable, var(--color-primary))",
				}}
			>
				Go
			</button>
		</form>
	);
}