"use client"

import type { ISelectItemProps, ISelectProps } from "./Select.d"
import type { JSX } from "react"

import { Select as RadixSelect } from "@radix-ui/themes"
import { forwardRef } from "react"

export const Select = forwardRef<HTMLButtonElement, ISelectProps>(
	({ placeholder, children, ...props }, ref): JSX.Element => (
		<RadixSelect.Root {...props}>
			<RadixSelect.Trigger ref={ref} placeholder={placeholder} />
			<RadixSelect.Content position="popper">
				{children}
			</RadixSelect.Content>
		</RadixSelect.Root>
	),
)

Select.displayName = "Select"

export const SelectItem = forwardRef<HTMLDivElement, ISelectItemProps>(
	({ children, ...props }, ref): JSX.Element => (
		<RadixSelect.Item ref={ref} {...props}>
			{children}
		</RadixSelect.Item>
	),
)

SelectItem.displayName = "SelectItem"

export const SelectGroup = RadixSelect.Group
export const SelectLabel = RadixSelect.Label
export const SelectSeparator = RadixSelect.Separator
