---
/**
 * DROPDOWN COMPONENT
 */
import type { Dropdown, ControlOption } from '@astro-reactive/common';

export interface Props {
	control: Dropdown;
  readOnly?: boolean;
}

const { control, readOnly } = Astro.props;

const options = control.options.map((option: string | ControlOption) => {
	if (typeof option === 'string') {
		return {
			label: option,
			value: option,
		};
	}
	return option;
});
---

<select
	name={control.name}
	id={control.name}
	disabled={readOnly || null}
>
{
	control?.placeholder && (
		<option value="" disabled selected={!control?.value}>
			{control.placeholder}
        </option>
	)
}
{	
	options.map((option: ControlOption) => (
        <option
			value={option.value} 
			selected={option.value === control.value}
		>
			{option.label}
        </option>
	))
}
</select>
