<script lang="ts">
	import type { Snippet } from "svelte";
	import type { HTMLInputAttributes } from "svelte/elements";

	interface Props extends Omit<HTMLInputAttributes, "type" | "class" | "value" | "children"> {
		value: string;
		group?: string;
		disabled?: boolean;
		class?: string;
		children?: Snippet;
	}

	let {
		value,
		group = $bindable(undefined),
		disabled = false,
		class: className,
		children,
		...rest
	}: Props = $props();

	const labelClasses = $derived(
		`inline-flex items-center gap-2 ${disabled ? "cursor-not-allowed text-foreground-disabled" : "cursor-pointer"} ${className ?? ""}`
	);
</script>

<label class={labelClasses}>
	<span class="relative inline-flex">
		<input
			type="radio"
			{value}
			bind:group
			{disabled}
			class="peer size-4 shrink-0 cursor-pointer appearance-none rounded-full border border-foreground-placeholder
			       bg-background-default transition-colors
				   duration-150 checked:border-foreground-default
				   hover:bg-background-subtle focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-foreground-default
				   disabled:pointer-events-none disabled:cursor-not-allowed disabled:border-border-disabled disabled:hover:bg-inherit"
			{...rest}
		/>
		<span
			class="absolute inset-0 m-auto hidden
			       size-2 rounded-full
			       bg-foreground-default peer-checked:block
				   peer-disabled:bg-foreground-disabled peer-disabled:text-foreground-disabled"
			aria-hidden="true"
		></span>
	</span>
	{#if children}
		<span>{@render children()}</span>
	{/if}
</label>
