import {__} from '@wordpress/i18n';

export default function Dropdown(
	{
		variant = 'input',
		className,
		options = [],
		placeholder = __("Select...", "dxp"),
		selectedOption,
		disabled = false,
		handleSelectChange = function (event) {
		},
	}
) {
	let classes = VARIANTS[variant]?.replace(/\s+/g, ' ');
	return (
		<select
			className={classes}
			value={selectedOption}
			onChange={handleSelectChange}
			disabled={disabled}
		>
			<option
				value="">{placeholder}</option>
			{(options).map((option, index) => (
				<option
					key={index}
					value={option.id}
					disabled={option.disabled || false}
				>
					{option.name}
				</option>
			))}
		</select>
	);
}

const VARIANTS = {
	input: `
		!dxp-border-gray-300
		!dxp-leading-5
		!dxp-px-3.5
		!dxp-py-4
		!dxp-rounded-lg
		!dxp-text-sm
		!dxp-w-full
		!focus:dxp-border-purple
		!focus-visible:dxp-border-purple
		!placeholder:dxp-text-sm
		!placeholder:dxp-text-tundora
	`,
	'group-left-gray': `
		!dxp-bg-gray-200/[.08]
		!dxp-border-gray-200
		!dxp-border-r-white
		!dxp-leading-5
		!dxp-m-0
		!dxp-px-3.5
		!dxp-py-4
		!dxp-rounded-e-none
		!dxp-rounded-s-lg
		!dxp-text-sm
		!dxp-w-full
		focus-visible:!dxp-shadow-none
		focus-visible:!dxp-border
		focus-visible:!dxp-border-1
		focus-visible:!dxp-border-purple
		focus:!dxp-shadow-none
		focus:!dxp-border
		focus:!dxp-border-1
		focus:!dxp-border-purple
		!placeholder:dxp-text-sm
		!placeholder:dxp-text-tundora
		!disabled:dxp-text-tundora
		!disabled:opacity-75
	`,
}