import type { RadioButtonProps } from "$/types/InputTypes";
import { Radio } from "@headlessui/react";
import clsx from "clsx";
import { useId } from "react";


export default function RadioButton({
	id,
	className,
	labelClassName,
	size = "sm",
	value,
	disabled,
	children
}: Readonly<RadioButtonProps>) {
	const reactId = useId();
	const effectiveId = id ?? reactId;

	return (
		<Radio
			id={effectiveId}
			value={value}
			className={clsx(
				"group",
				"flex flex-row items-center justify-center gap-x-2",
				"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2",
				{
					"cursor-pointer": !disabled,
					"cursor-not-allowed": disabled
				}
			)}
			disabled={disabled}
			aria-labelledby={`${effectiveId}Label`}
		>
			<div
				className={clsx(
					"rounded-full not-group-data-checked:border",
					className,
					{
						"": size === "none",
						"size-3": size === "xs",
						"size-4": size === "sm",
						"size-5": size === "md",
						"size-6": size === "lg",
						"size-7": size === "xl"
					}
				)}
			/>
			{
				children &&
				<span
					id={`${effectiveId}Label`}
					className={labelClassName}
				>
					{children}
				</span>
			}
		</Radio>
	);
}