<script setup lang="ts">
import type { DomainFactory } from "@/lib/factory";
import CoolDomain from "./CoolDomain.vue";

defineProps<{ factory: DomainFactory }>();
</script>

<template>
  <div>
    <p v-for="(domain, i) in factory.history.slice().reverse()" :key="`domain-${i}`" class="pt-3">
      <CoolDomain :domain="domain"></CoolDomain>
      <span v-if="domain.searching"
        >&nbsp;<span class="loading loading-dots loading-xs"></span
      ></span>
      <span v-else-if="domain.available"
        >&nbsp;{{ $t("seems") }}
        <a
          :href="`https://tld-list.com/${$i18n.locale}/tld/${domain.name?.split('.')[1]}`"
          target="_blank"
          class="underline"
          >{{ $t("available") }}</a
        ></span
      ><span v-else>&nbsp;{{ $t("is_unavailable") }}</span>
    </p>
  </div>
</template>
