<script setup lang="ts">
import { type LocalizedNavigationParams, navigateToLocalizedPage } from '#adata-ui/utils/localizedNavigation'

interface Props {
  illClass?: string
  text?: string
  textClass?:string
  buttonName?: string
  to?: LocalizedNavigationParams
  noIll?: boolean
  noText?: boolean
  noBtn?: boolean
}
const props = defineProps<Props>()

const appConfig = useAppConfig()
const loginUrl = appConfig.myLayer.loginUrl
const device = useAdaptive()
const { t, locale } = useI18n()

function goAuth() {
  if (window) {
    if (props.to) {
      navigateToLocalizedPage(props.to)
    } else {
      const fullPath = encodeURIComponent(window.location.toString())
      navigateToLocalizedPage({
        locale,
        projectUrl: loginUrl.slice(0, -1),
        path: `/?url=${fullPath}`,
        target: '_self'
      })
    }
  }
}
</script>

<template>
  <div class="flex flex-col items-center gap-4 text-center text-sm">
    <div v-if="!noIll">
      <slot name="illustration">
        <a-ill-door :class="illClass" />
      </slot>
    </div>
    <p
      v-if="!noText"
      :class="textClass"
    >
      {{ text ?? t('illustrations.afterLogInBlock.tariff') }}
    </p>
    <slot name="button">
      <a-button
        v-if="!noBtn"
        :block="device.isMobile"
        view="outline"
        @click="goAuth"
      >
        {{ buttonName ?? t('illustrations.afterLogInBlock.login') }}
      </a-button>
    </slot>
  </div>
</template>
