"use client"

import type { ICheckboxProps } from "./Checkbox.d"
import type { JSX } from "react"

import { Checkbox as RadixCheckbox, Flex, Text } from "@radix-ui/themes"
import { forwardRef, useId } from "react"

export const Checkbox = forwardRef<HTMLButtonElement, ICheckboxProps>(
	({ label, id: propId, ...props }, ref): JSX.Element => {
		const generatedId = useId()
		const id = propId ?? generatedId

		return (
			<Text as="label" size="2">
				<Flex gap="2" align="center">
					<RadixCheckbox ref={ref} id={id} {...props} />
					{label}
				</Flex>
			</Text>
		)
	},
)

Checkbox.displayName = "Checkbox"
