import { defineCustomElement } from 'vue';
import UserMenuElement from './components/UserMenu.ce.vue';
import LangSelectorElement from './components/LangSelector.ce.vue';
import './style.css';

const USER_MENU_TAG = 'user-menu';
const LANG_SELECTOR_TAG = 'lang-selector';

export function registerWebComponents(): void {
  if (!customElements.get(USER_MENU_TAG)) {
    customElements.define(
      USER_MENU_TAG,
      defineCustomElement(UserMenuElement, {
        // Tailwind is generated as global CSS; without Shadow DOM
        // utility classes apply correctly inside the custom element.
        shadowRoot: false,
      }),
    );
  }

  if (!customElements.get(LANG_SELECTOR_TAG)) {
    customElements.define(
      LANG_SELECTOR_TAG,
      defineCustomElement(LangSelectorElement, {
        shadowRoot: false,
      }),
    );
  }
}

registerWebComponents();