"use client";

import * as RadioGroupPrimitives from "@radix-ui/react-radio-group";
import React from "react";
import { cx, focusRing } from "../lib/utils";

const OnboardingRadioGroup = React.forwardRef<
	React.ElementRef<typeof RadioGroupPrimitives.Root>,
	React.ComponentPropsWithoutRef<typeof RadioGroupPrimitives.Root>
>(({ className, ...props }, forwardedRef) => {
	return (
		<RadioGroupPrimitives.Root
			ref={forwardedRef}
			className={cx("grid gap-2", className)}
			{...props}
		/>
	);
});

OnboardingRadioGroup.displayName = "OnboardingRadioGroup";

const OnboardingRadioGroupIndicator = React.forwardRef<
	React.ElementRef<typeof RadioGroupPrimitives.Indicator>,
	React.ComponentPropsWithoutRef<typeof RadioGroupPrimitives.Indicator>
>(({ className, ...props }, forwardedRef) => {
	return (
		<RadioGroupPrimitives.Indicator
			ref={forwardedRef}
			className={cx("flex items-center justify-center", className)}
			{...props}
		>
			<div
				className={cx(
					"size-1.5 shrink-0 rounded-full",
					"bg-primary-foreground",
					"group-data-[disabled]:bg-muted-foreground",
				)}
			/>
		</RadioGroupPrimitives.Indicator>
	);
});

OnboardingRadioGroupIndicator.displayName = "OnboardingRadioGroupIndicator";

const OnboardingRadioGroupItem = React.forwardRef<
	React.ElementRef<typeof RadioGroupPrimitives.Item>,
	React.ComponentPropsWithoutRef<typeof RadioGroupPrimitives.Item>
>(({ className, ...props }, forwardedRef) => {
	return (
		<RadioGroupPrimitives.Item
			ref={forwardedRef}
			className={cx(
				"group relative flex size-4 appearance-none items-center justify-center outline-none",
				className,
			)}
			{...props}
		>
			<div
				className={cx(
					"flex size-4 shrink-0 items-center justify-center rounded-full border shadow-sm",
					"border-border",
					"bg-background",
					"group-data-[state=checked]:border-0 group-data-[state=checked]:border-transparent group-data-[state=checked]:bg-primary",
					"group-data-[disabled]:border",
					"group-data-[disabled]:border-border group-data-[disabled]:bg-muted group-data-[disabled]:text-muted-foreground",
					focusRing,
				)}
			>
				<OnboardingRadioGroupIndicator />
			</div>
		</RadioGroupPrimitives.Item>
	);
});

OnboardingRadioGroupItem.displayName = "OnboardingRadioGroupItem";

export { OnboardingRadioGroup, OnboardingRadioGroupItem };