---
import Select from '@astrojs/starlight/components/Select.astro';
import type { Props } from '@astrojs/starlight/props';
---

<docs-version-select>
    <Select
		icon="starlight"
		label="version"
		value="main"
		options={[
			{ label: 'latest', selected: import.meta.env.BASE_URL === '/main', value: 'main' },
			{ label: 'develop', selected: import.meta.env.BASE_URL === '/develop', value: 'develop' },
			{ label: 'next', selected: import.meta.env.BASE_URL === '/next', value: 'next' },
		]}
		width="7em"
	/>
</docs-version-select>

<script>
	class DocsVersionSelect extends HTMLElement {
		constructor() {
			super();
			const select = this.querySelector('select');
			if (select) {
				select.addEventListener('change', (e) => {
					if (e.currentTarget instanceof HTMLSelectElement) {
						window.location.pathname = e.currentTarget.value;
					}
				});
			}
		}
	}
	customElements.define('docs-version-select', DocsVersionSelect);
</script>