import { RaidGroupPermissionType } from "@/interface/RaidGroup";


export default function RaidGroupPermissionSelector({
	value,
	onChange
}:{
	value?: RaidGroupPermissionType;
	onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
}){
	const modalId = crypto.randomUUID().replaceAll("-", "");


	return (
		<div
			className="flex flex-row flex-wrap justify-start gap-x-4"
		>
			{
				Object.keys(RaidGroupPermissionType).map((permissionType) => (
					<label
						key={permissionType}
						className="whitespace-nowrap"
					>
						<input
							type="radio"
							name={`raidGroupPermissionTypeSelector${modalId}`}
							value={permissionType}
							onChange={onChange}
							checked={value === permissionType as RaidGroupPermissionType}
						/>
						<span
							className="ml-1"
						>
							{permissionType}
						</span>
					</label>
				))
			}
		</div>
	);
}