<template>
  <div v-if="!to && !bigRight" class="col-12 lg:col-6">
    <BaseItem class="relative" :bgColor="bgColor">
      <div class="flex flex-column justify-content-between">
        <div class="white-space-nowrap font-bold overflow-hidden text-overflow-ellipsis"><slot name="description"></slot></div>
        <div class="flex justify-content-between">
          <div class="flex align-items-center mt-1">
            <TheBadge size="sm" color="info"><slot name="badgeOne"></slot></TheBadge>
            <TheBadge v-if="badgeTwo" size="sm" color="warning" class="ml-2"><slot name="badgeTwo"></slot></TheBadge>
          </div>
          <slot name="right"></slot>
        </div>
      </div>
    </BaseItem>
  </div>
  <div v-else-if="bigRight" class="col-12 lg:col-6">
    <BaseItem class="relative" :bgColor="bgColor">
      <div class="flex justify-content-between">
        <div class="flex flex-column overflow-hidden">
          <div class="white-space-nowrap font-bold overflow-hidden text-overflow-ellipsis"><slot name="description"></slot></div>
          <div class="flex align-items-center mt-1">
            <TheBadge size="sm" color="info"><slot name="badgeOne"></slot></TheBadge>
            <TheBadge v-if="badgeTwo" size="sm" color="warning" class="ml-2"><slot name="badgeTwo"></slot></TheBadge>
          </div>
        </div>
        <slot name="right"></slot>
      </div>
    </BaseItem>
  </div>
  <router-link v-else class="col-12 lg:col-6 no-underline" :to="to">
    <BaseItem class="relative" :bgColor="bgColor">
      <div class="flex justify-content-between overflow-hidden">
        <div class="flex flex-column align-items-start">
          <div class="white-space-nowrap overflow-hidden text-overflow-ellipsis font-bold"><slot name="description"></slot></div>
          <div class="flex align-items-center mt-1">
            <TheBadge size="sm" color="success"><slot name="badge"></slot></TheBadge>
          </div>
        </div>
        <slot name="right"></slot>
      </div>
    </BaseItem>
  </router-link>
</template>

<script lang="ts">
import { defineComponent } from "vue";
import TheBadge from "@/components/UI/TheBadge.vue";
import BaseItem from "@/components/UI/BaseItem.vue";

export default defineComponent({
  name: "SmallCard",
  components: { TheBadge, BaseItem },
  props: {
    bgColor: { type: String, default: "a" },
    to: { type: String, default: "" },
    badgeTwo: { type: Boolean, default: true },
    bigRight: { type: Boolean, default: false },
  },
});
</script>
