"use client"

import type { IRadioGroupProps, IRadioProps } from "./Radio.d"
import type { JSX } from "react"

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

export const RadioGroupRoot = forwardRef<HTMLDivElement, IRadioGroupProps>(
	({ ...props }, ref): JSX.Element => (
		<RadioGroup.Root ref={ref} {...props} />
	),
)

RadioGroupRoot.displayName = "RadioGroup"

export const Radio = forwardRef<HTMLButtonElement, IRadioProps>(
	({ 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">
					<RadioGroup.Item ref={ref} id={id} {...props} />
					{label}
				</Flex>
			</Text>
		)
	},
)

Radio.displayName = "Radio"

export { RadioGroupRoot as RadioGroup }
