---
const { name, description, url, image } = Astro.props;
---

<a
  href={url}
  target="_blank"
  class="relative flex flex-col items-stretch duration-300 ease-out p-7 sm:p-3 group h-100 rounded-2xl"
>
  <span
    class="absolute inset-0 z-20 block w-full h-full duration-300 ease-out bg-transparent border border-transparent border-dashed group-hover:-translate-x-1 group-hover:-translate-y-1 group-hover:border group-hover:border-neutral-300 dark:group-hover:border-neutral-600 group-hover:border-dashed rounded-2xl group-hover:bg-white dark:group-hover:bg-neutral-950"
  ></span>
  <span
    class="absolute inset-0 z-10 block w-full h-full duration-300 ease-out border border-dashed rounded-2xl border-neutral-300 dark:border-neutral-600 group-hover:translate-x-1 group-hover:translate-y-1"
  ></span>
  <span
    class="relative z-30 block duration-300 ease-out group-hover:-translate-x-1 group-hover:-translate-y-1"
  >
    <span class="block w-full">
      <img src={image} class="w-full h-auto rounded-lg aspect-[16/9]" />
    </span>
    <span class="block w-full px-1 mt-5 mb-1 sm:mt-3">
      <span
        class="flex items-center mb-0 text-base font-semibold tracking-tight text-neutral-900 dark:text-neutral-100"
      >
        <span>{name}</span>
        <svg
          class="group-hover:translate-x-0 group-hover:translate-y-0 -rotate-45 translate-y-1 -translate-x-1 w-2.5 h-2.5 stroke-current ml-1 transition-all ease-in-out duration-200 transform"
          viewBox="0 0 13 15"
          version="1.1"
          xmlns="http://www.w3.org/2000/svg"
          xmlns:xlink="http://www.w3.org/1999/xlink"
          ><g
            stroke="none"
            stroke-width="1"
            fill="none"
            fill-rule="evenodd"
            stroke-linecap="round"
            stroke-linejoin="round"
            ><g
              id="svg"
              transform="translate(0.666667, 2.333333)"
              stroke="currentColor"
              stroke-width="2.4"
              ><g
                ><polyline
                  class="transition-all duration-200 ease-out opacity-0 delay-0 group-hover:opacity-100"
                  points="5.33333333 0 10.8333333 5.5 5.33333333 11"
                ></polyline><line
                  class="transition-all duration-200 ease-out transform -translate-x-1 opacity-0 group-hover:translate-x-0 group-hover:opacity-100 group-hover:ml-0"
                  x1="10.8333333"
                  y1="5.5"
                  x2="0.833333333"
                  y2="5.16666667"></line></g
              ></g
            ></g
          ></svg
        >
      </span>
      <span class="text-sm text-neutral-600 dark:text-neutral-400"
        >{description}</span
      >
    </span>
  </span>
</a>