"use client";

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

const OnboardingCheckbox = React.forwardRef<
	React.ElementRef<typeof CheckboxPrimitives.Root>,
	React.ComponentPropsWithoutRef<typeof CheckboxPrimitives.Root>
>(({ className, checked, ...props }, forwardedRef) => {
	return (
		<CheckboxPrimitives.Root
			ref={forwardedRef}
			{...props}
			checked={checked}
			className={cx(
				"relative inline-flex size-4 shrink-0 appearance-none items-center justify-center rounded border shadow-sm outline-none transition duration-100 enabled:cursor-pointer",
				"text-primary-foreground",
				"bg-background",
				"border-border",
				"data-[disabled]:border-border data-[disabled]:bg-muted data-[disabled]:text-muted-foreground",
				"enabled:data-[state=checked]:border-0 enabled:data-[state=checked]:border-transparent enabled:data-[state=checked]:bg-primary",
				"enabled:data-[state=indeterminate]:border-0 enabled:data-[state=indeterminate]:border-transparent enabled:data-[state=indeterminate]:bg-primary",
				focusRing,
				className,
			)}
		>
			<CheckboxPrimitives.Indicator className="flex size-full items-center justify-center text-current">
				{checked === "indeterminate" ? (
					<svg
						aria-hidden="true"
						width="16"
						height="16"
						viewBox="0 0 16 16"
						fill="none"
						xmlns="http://www.w3.org/2000/svg"
					>
						<line
							stroke="currentColor"
							strokeLinecap="round"
							strokeWidth="2"
							x1="4"
							x2="12"
							y1="8"
							y2="8"
						/>
					</svg>
				) : (
					<svg
						width="16"
						height="16"
						viewBox="0 0 16 16"
						fill="none"
						xmlns="http://www.w3.org/2000/svg"
					>
						<path
							d="M11.2 5.59998L6.79999 9.99998L4.79999 7.99998"
							stroke="currentColor"
							strokeLinecap="round"
							strokeLinejoin="round"
							strokeWidth="2"
						/>
					</svg>
				)}
			</CheckboxPrimitives.Indicator>
		</CheckboxPrimitives.Root>
	);
});

OnboardingCheckbox.displayName = "OnboardingCheckbox";

export { OnboardingCheckbox };