import { VALID_CR_VALUES } from "@initiative/domain";

const CR_LABELS: Record<string, string> = {
	"0": "CR 0",
	"1/8": "CR 1/8",
	"1/4": "CR 1/4",
	"1/2": "CR 1/2",
};

function formatCr(cr: string): string {
	return CR_LABELS[cr] ?? `CR ${cr}`;
}

export function CrPicker({
	value,
	onChange,
}: {
	value: string | null;
	onChange: (cr: string | undefined) => void;
}) {
	return (
		<select
			className="rounded border border-border bg-card px-1.5 py-0.5 text-xs"
			value={value ?? ""}
			onChange={(e) => onChange(e.target.value || undefined)}
			aria-label="Challenge rating"
		>
			<option value="">Assign</option>
			{VALID_CR_VALUES.map((cr) => (
				<option key={cr} value={cr}>
					{formatCr(cr)}
				</option>
			))}
		</select>
	);
}