import type { SelectInputProps } from "$/types/InputTypes";
import { Listbox, ListboxButton, ListboxOptions } from "@headlessui/react";
import clsx from "clsx";
import { BsChevronDown } from "react-icons/bs";


export default function SelectInput({
	placeholder,
	value,
	onChange,
	disabled,
	children
}: Readonly<SelectInputProps>){
	return (
		<Listbox
			value={value}
			onChange={onChange}
			disabled={disabled}
		>
			<ListboxButton
				className={clsx(
					"group relative flex flex-row items-center justify-between w-full",
					"border-2 px-2 py-1 rounded-lg",
					"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2"
					//"not-data-open:rounded-lg data-open:rounded-t-lg"
				)}
			>
				<span>{placeholder}</span>
				<span className="block group-data-open:rotate-180 transition-transform duration-250"><BsChevronDown size={22}/></span>
			</ListboxButton>
			<ListboxOptions
				className="w-(--button-width) max-h-60! overflow-hidden z-10 outline-none rounded-lg"
				anchor="bottom"
			>
				{children}
			</ListboxOptions>
		</Listbox>
	);
}