"use client";

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

const OnboardingRadioCardGroup = 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}
		/>
	);
});

OnboardingRadioCardGroup.displayName = "OnboardingRadioCardGroup";

const OnboardingRadioCardItem = React.forwardRef<
	React.ElementRef<typeof RadioGroupPrimitives.Item>,
	React.ComponentPropsWithoutRef<typeof RadioGroupPrimitives.Item>
>(({ className, children, ...props }, forwardedRef) => {
	return (
		<RadioGroupPrimitives.Item
			ref={forwardedRef}
			className={cx(
				"group relative w-full rounded-md border p-4 text-left shadow-sm transition focus:outline-none",
				"bg-card",
				"border-border",
				"data-[state=checked]:border-primary",
				"data-[disabled]:border-border data-[disabled]:bg-muted data-[disabled]:shadow-none",
				focusInput,
				className,
			)}
			{...props}
		>
			{children}
		</RadioGroupPrimitives.Item>
	);
});

OnboardingRadioCardItem.displayName = "OnboardingRadioCardItem";

const OnboardingRadioCardIndicator = React.forwardRef<
	React.ElementRef<typeof RadioGroupPrimitives.Indicator>,
	React.ComponentPropsWithoutRef<typeof RadioGroupPrimitives.Indicator>
>(({ className, ...props }, forwardedRef) => {
	return (
		<div
			className={cx(
				"relative flex size-4 shrink-0 appearance-none items-center justify-center rounded-full border shadow-sm outline-none",
				"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-border group-data-[disabled]:bg-muted group-data-[disabled]:text-muted-foreground",
				focusRing,
				className,
			)}
		>
			<RadioGroupPrimitives.Indicator
				ref={forwardedRef}
				className={cx("flex items-center justify-center")}
				{...props}
			>
				<div
					className={cx(
						"size-1.5 shrink-0 rounded-full",
						"bg-primary-foreground",
						"group-data-[disabled]:bg-muted-foreground",
					)}
				/>
			</RadioGroupPrimitives.Indicator>
		</div>
	);
});

OnboardingRadioCardIndicator.displayName = "OnboardingRadioCardIndicator";

export {
	OnboardingRadioCardGroup,
	OnboardingRadioCardIndicator,
	OnboardingRadioCardItem,
};