<script setup lang="ts">
import type { BlogCardType } from "~/types/blogCard";

const props = defineProps<BlogCardType>();
</script>

<template>
  <Card
    class="card bg-surface-background border-surface-border flex h-full flex-col rounded-lg border pt-0 transition-all duration-550 ease-in-out"
  >
    <CardHeader class="px-0 py-0">
      <NuxtImg
        :src="props.image"
        :alt="props.title"
        class="h-[150px] w-full rounded-t-lg object-cover sm:h-[180px] md:h-[200px] lg:h-[216px]"
      />
    </CardHeader>
    <CardContent class="flex-1 space-y-3 p-4">
      <p
        class="text-accent text-base leading-6 font-normal sm:text-base md:text-lg"
      >
        {{ props.tag }}
      </p>

      <CardTitle
        class="line-clamp-2 text-lg leading-snug font-bold sm:text-xl md:text-2xl"
      >
        {{ props.title }}
      </CardTitle>

      <div
        class="v-html-prose text-muted-foreground line-clamp-4 text-sm leading-relaxed font-normal sm:text-base md:text-lg"
        v-html="props.description"
      />
    </CardContent>

    <CardFooter class="p-4 pt-0">
      <!-- TODO: Need to keep one element Button OR NuxtLinkLocale -->
      <NuxtLinkLocale
        :to="{ name: 'blogs-slug', params: { slug: String(props.slug) } }"
        class="w-full"
      >
        <Button
          variant="wsGradient"
          size="wsDefault"
          class="w-full cursor-pointer text-base sm:text-base md:text-lg"
        >
          {{ $t("card.readMore") }}
        </Button>
      </NuxtLinkLocale>
    </CardFooter>
  </Card>
</template>

<style scoped>
.card:hover {
  transform: translateX(8px);
  box-shadow:
    -16px 16px var(--surface-background),
    -17px 17px var(--surface-border);
}

.v-html-prose :deep(*) {
  color: currentColor !important;
  font-family: "Almarai", system-ui, sans-serif !important;
  line-height: 1.6 !important;
}
</style>
