---
// Import necessary modules and utilities
import { Image } from "astro:assets";
import type { CollectionEntry } from "astro:content";
// Define data source from Astro.js incoming props
const { insightEntry } = Astro.props;
// Define TypeScript props interface
interface Props {
  insightEntry: CollectionEntry<"insights">;
}
---

<!-- The anchor tag is the root container for the "Insight" card. It links to the insight detail page. -->
<a
  class="group outline-none ring-zinc-500 transition duration-300 focus-visible:ring dark:ring-zinc-200 dark:focus:outline-none"
  href={`/insights/${insightEntry.slug}/`}
>
  <!-- This is the container for the insight's cover image. -->
  <div class="relative overflow-hidden rounded-xl pt-[50%] sm:pt-[70%]">
    <Image
      class="absolute start-0 top-0 size-full rounded-xl object-cover transition duration-500 ease-in-out group-hover:scale-105"
      src={insightEntry.data.cardImage}
      alt={insightEntry.data.cardImageAlt}
      draggable={"false"}
      format={"avif"}
    />
  </div>
  <!-- This is the container for the insight's title and description. -->
  <div class="mt-7">
    <!-- The title of the insight -->
    <h3
      class="text-xl font-bold text-neutral-800 group-hover:text-neutral-600 dark:text-neutral-200 dark:group-hover:text-neutral-400"
    >
      {insightEntry.data.title}
    </h3>
    <!-- The description of the insight -->
    <p class="mt-3 text-neutral-600 dark:text-neutral-400">
      {insightEntry.data.description}
    </p>
    <!-- The "Read More" hyperlink going to the full insight. With an arrow icon -->
    <p
      class="mt-5 inline-flex items-center gap-x-1 font-medium text-[#fa5a15] decoration-2 group-hover:underline dark:text-[#fb713b]"
    >
      Read more
      <svg
        class="size-4 flex-shrink-0"
        xmlns="http://www.w3.org/2000/svg"
        width="24"
        height="24"
        viewBox="0 0 24 24"
        fill="none"
        stroke="currentColor"
        stroke-width="2"
        stroke-linecap="round"
        stroke-linejoin="round"><path d="m9 18 6-6-6-6"></path></svg
      >
    </p>
  </div>
</a>