<!--
  UserMenu — canonical bridge for the after-login account menu.

  CODE-FIRST (owner approved 2026-07-02, divergence `logo-menulist-usermenu-code-first-2026-07-02`):
  Figma has NO standalone `UserMenu` component-set — the account area (avatar,
  name, role) exists only as internal layers of the `Top bar` component. This
  canonical composes those parts into the reusable dual-framework component that
  CLAUDE_DESIGN_RULES §3 mandates for every `tag="After Login"` TopBar's
  `rightContent`: a solid-color avatar (initials from `name`, or `image`/`color`)
  that expands to an account header (name + `role` badge + email) + custom
  `actions` + inline language toggle + sign-out. The panel body is a `MenuList`.
  Emits `action(value, item)`, `languageChange(value)`, `signOut()`.
-->
<script setup lang="ts">
import BaseUserMenu, {
  type UserMenuLanguage,
} from '../components/UserMenu/UserMenu.vue'
import { type MenuListItem } from '../components/MenuList/MenuList.vue'

export type { UserMenuLanguage, MenuListItem }

withDefaults(defineProps<{
  name?: string
  email?: string
  role?: string
  image?: string
  color?: string
  actions?: MenuListItem[]
  languages?: UserMenuLanguage[]
  lang?: string
}>(), {
  name: '',
  actions: () => [],
  languages: () => [],
})

const emit = defineEmits<{
  (e: 'action', value: string | number, item: MenuListItem): void
  (e: 'languageChange', value: string): void
  (e: 'signOut'): void
}>()
</script>

<template>
  <BaseUserMenu
    :name="name"
    :email="email"
    :role="role"
    :image="image"
    :color="color"
    :actions="actions"
    :languages="languages"
    :lang="lang"
    data-figma-component="UserMenu"
    @action="(value, item) => emit('action', value, item)"
    @language-change="(value) => emit('languageChange', value)"
    @sign-out="() => emit('signOut')"
  />
</template>
