import { ChevronDown } from 'lucide-react';
import { clsx } from '@admin/utils';
import { FIELD_SURFACE_CLASSES } from './field-styles';

export function Select( { value, onChange, options, disabled, label } ) {
	return (
		<div className="relative inline-block w-fit max-w-full">
			<select
				value={ value }
				disabled={ disabled }
				aria-label={ label }
				onChange={ ( e ) => onChange( e.target.value ) }
				className={ clsx(
					FIELD_SURFACE_CLASSES,
					'min-w-[160px] cursor-pointer appearance-none bg-[image:none]! py-2 pr-9 pl-3 disabled:cursor-not-allowed'
				) }
			>
				{ options.map( ( option ) => (
					<option key={ option.value } value={ option.value }>
						{ option.label }
					</option>
				) ) }
			</select>
			<ChevronDown className="pointer-events-none absolute top-1/2 right-3 size-4 -translate-y-1/2 text-gray-400" />
		</div>
	);
}