<script setup lang="ts">
import type { ServiceStatus } from './type'
import { Loader, Loader2 } from 'lucide-vue-next'
import { cn } from '~/lib/utils'

const props = defineProps<ServiceStatus>()

const tokenStatus = computed((): string => {
  return props.sessionActive ? 'Valid' : 'Invalid'
})
</script>

<template>
  <Card v-if="props.isSkeleton" class="py-6">
    <div class="flex gap-4 justify-between px-6">
      <div class="flex gap-2 items-center">
        <span class="bg-gray-100">
          <Skeleton class="bg-gray-100 w-6 h-6 sm:w-8 sm:h-8" />
        </span>
        <div>
          <Skeleton class="w-64 h-8 bg-gray-100 text-xs md:text-sm text-muted-foreground" />
        </div>
      </div>
      <div class="text-right flex flex-col items-end">
        <Skeleton class="w-32 h-2 bg-gray-100 text-xs md:text-md text-muted-foreground" />
        <Skeleton class="w-32 h-3 bg-gray-100 text-xs md:text-md font-bold" />
      </div>
    </div>
  </Card>
  <Card v-else class="py-6">
    <div class="flex gap-4 justify-between px-6">
      <div class="flex gap-2 items-center">
        <span
:class="cn(' rounded-md w-12 h-12 flex items-center justify-center',
          { 'bg-red-500': props.status === 'error' },
          { 'bg-blue-500': props.status !== 'error' },
        )"
>
          <Icon v-if="props.status === 'error'" name="i-lucide-cable" class="text-white w-6 h-6 sm:w-8 sm:h-8" />
          <Icon v-else name="i-lucide-bring-to-front" class="text-white w-6 h-6 sm:w-8 sm:h-8" />
        </span>
        <div>
          <p v-if="props.status === 'connected'" class="text-xs md:text-md font-bold">Koneksi {{ props.serviceName }}
            Aktif</p>
          <p v-if="props.status === 'connecting'" class="flex flex-row text-xs md:text-md font-bold">Menghubungkan ke
            API {{
              props.serviceName }}
            <Loader2 class="ml-2 h-4 w-4 animate-spin" />
          </p>
          <p v-if="props.status === 'error'" class="text-xs md:text-md font-bold">Koneksi ke API {{ props.serviceName
          }}
            Gagal</p>
          <p v-if="props.status === 'connected'" class="text-xs md:text-sm text-muted-foreground">Koneksi Terhubung ke
            API {{ props.serviceDesc }}
          </p>
        </div>
      </div>
      <div class="text-right flex flex-col items-end">
        <p class="text-xs md:text-md text-muted-foreground">Session Token</p>
        <p v-if="props.status === 'connecting'">
          <Loader class="ml-2 h-4 w-4 animate-spin" />
        </p>
        <p
v-else :class="cn('text-xs md:text-md font-bold',
          { 'text-blue-500': props.sessionActive },
          { 'text-red-500': !props.sessionActive },
        )"
>{{ tokenStatus }}</p>
      </div>
    </div>
  </Card>
</template>
