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


export default function SelectInput(props: SelectInputProps){
	const {
		label,
		value,
		onChange,
		children
	} = props;


	return (
		<Listbox
			value={value}
			onChange={onChange}
		>
			<div
				className="relative w-full"
			>
				<ListboxButton
					className={clsx(
						"flex flex-row items-center justify-between w-full",
						"outline rounded px-2 py-1"
					)}
				>
					<span>{label}</span>
					<span><BsChevronDown size={22}/></span>
				</ListboxButton>
				<ListboxOptions
					className="absolute w-full max-h-60 overflow-scroll z-10 outline-none"
				>
					{children}
				</ListboxOptions>
			</div>
		</Listbox>
	);
}