<script lang="ts" setup>
defineProps<{ oauthAccounts: string[] }>()

const { t } = useI18n()
const availableProviders = [
  { id: 'google', name: 'Google', icon: 'i-logos-google-icon' },
  { id: 'github', name: 'Github', icon: 'i-octicon-mark-github-16' },
  { id: 'discord', name: 'Discord', icon: 'i-logos-discord-icon' },
  { id: 'credential', name: 'Credential', icon: 'i-solar-password-line-duotone' },
  { id: 'passkey', name: 'Passkey', icon: 'i-solar-key-line-duotone' }
]
const getProviderIcon = (providerId: string) => {
  if (!providerId) return 'i-solar-question-circle-bold-duotone'
  const provider = availableProviders.find(p => p.id === providerId)
  return provider?.icon || 'i-solar-question-circle-bold-duotone'
}
const getProviderName = (providerId: string) => {
  if (!providerId) return t('superAdmin.userOAuthAccounts.unknown')
  const provider = availableProviders.find(p => p.id === providerId)
  return provider?.name || t('superAdmin.userOAuthAccounts.unknown')
}
</script>

<template>
  <div class="flex items-center gap-2">
    <UBadge
      v-for="account in oauthAccounts"
      :key="account"
      :label="getProviderName(account)"
      :icon="getProviderIcon(account)"
      variant="outline"
      color="neutral"
      size="sm"
    />
  </div>
</template>
