<script lang="ts" setup>
import type { ExtendedUser } from '~/types/database'

type ImpersonationUser = ExtendedUser & { avatarUrl?: string }
defineProps<{ user: ImpersonationUser }>()
// useUserSession may be provided by your auth layer at runtime
type SessionComposable = { fetch: () => Promise<void> }
const _g = globalThis as { useUserSession?: () => SessionComposable }
const stopImpersonation = async () => {
  const apiCall = useApiCall()
  await apiCall('/api/super-admin/stop-impersonation', { method: 'POST' })
  const { fetchSession } = useAuth()
  await fetchSession()
  window.location.href = '/dashboard/admin'
}
</script>

<template>
  <div
    class="sticky top-0 z-40 flex h-8 w-full animate-pulse items-center justify-between border-b border-white/10 bg-black px-4 text-sm text-white dark:border-neutral-700 dark:bg-neutral-300 dark:text-neutral-950"
  >
    <div class="flex items-center gap-2">
      {{ $t('superAdmin.impersonation.message') }}
      <div class="flex items-center gap-2">
        <UAvatar
          :src="user?.avatarUrl"
          size="3xs"
          :alt="user?.name"
        />
        <span class="font-bold"> {{ user?.email }} </span>
      </div>
      {{ $t('superAdmin.impersonation.caution') }}
    </div>
    <UButton
      size="xs"
      color="neutral"
      :label="$t('superAdmin.impersonation.stopButton')"
      @click="stopImpersonation()"
    />
  </div>
</template>
