<script lang="ts" setup>
interface Props {
  path?: string;
  title?: string;
  date?: string;
  tags?: Array<string>;
  published?: boolean;
}

withDefaults(defineProps<Props>(), {
  path: "/",
  title: "no-title",
  date: "no-date",
  tags: () => [],
  published: false,
});
</script>

<template>
  <article
    class="group border dark:border-gray-800 m-2 rounded-2xl overflow-hidden shadow-sm text-zinc-700 dark:text-zinc-300">
    <NuxtLink :to="path" class="grid grid-cols-1 sm:grid-cols-10 gap-1">
      <div class="sm:col-span-10 p-5">
        <h2
          class="text-xl font-semibold text-black dark:text-zinc-300 pb-1 group-hover:text-sky-700 dark:group-hover:text-sky-400">
          {{ title }}
        </h2>
        <div class="text-black dark:text-zinc-300 text-sm mt-2 mb-1 md:flex md:space-x-6">
          <div class="flex items-center">
            <Icon name="mdi:calendar" class="mr-1 w-4 h-4" />
            <p>{{ date }}</p>
          </div>
          <div class="flex items-center gap-1 flex-wrap">
            <Icon name="mdi:tag" class="w-4 h-4" />
            <p
              v-for="tag in tags"
              :key="tag"
              class="bg-gray-200 dark:bg-slate-900 rounded-md px-2 py-1 font-semibold">
              {{ tag }}
            </p>
          </div>
        </div>
        <div class="flex group-hover:underline text-sky-700 dark:text-sky-400 items-center pt-2">
          <p>Read More</p>
          <Icon name="mdi:arrow-right" class="ml-1 w-4 h-4" />
        </div>
      </div>
    </NuxtLink>
  </article>
</template>
