<script setup lang="ts">
import { defineProps } from 'vue';

import { createIconifyIcon } from '@vben/icons';
import { $t } from '@vben/locales';

import { VbenIconButton } from '@vben-core/shadcn-ui';

interface Props {
  thirdPartLoginList: any[];
}
defineOptions({
  name: 'ThirdPartyLogin',
});
const props = withDefaults(defineProps<Props>(), {});
function goApp(url: string) {
  window.location.href = url;
}
</script>

<template>
  <div class="w-full sm:mx-auto md:max-w-md">
    <div class="mt-4 flex items-center justify-between">
      <span class="border-input w-[35%] border-b dark:border-gray-600"></span>
      <span class="text-muted-foreground text-center text-xs uppercase">
        {{ $t('authentication.thirdPartyLogin') }}
      </span>
      <span class="border-input w-[35%] border-b dark:border-gray-600"></span>
    </div>

    <div class="mt-4 flex flex-wrap justify-center">
      <VbenIconButton
        v-for="item in thirdPartLoginList.filter((e) => e.enabled)"
        :key="item.type"
        class="mb-3"
        @click="goApp(item.authUri)"
      >
        <component :is="createIconifyIcon(item.icon)" />
      </VbenIconButton>
    </div>
  </div>
</template>
