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

<a
  href={url}
  target="_blank"
  class="relative flex flex-col items-stretch duration-300 ease-out p-5 sm:p-4 group h-full rounded-3xl w-full"
>
  <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-3xl 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-3xl 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 overflow-hidden rounded-xl"> <img 
        src={image} 
        class="w-full h-auto rounded-xl aspect-[16/9] object-cover transition-transform duration-500 group-hover:scale-105" 
        alt={name} 
      />
    </span>
    <span class="block w-full px-1 mt-5 mb-1 sm:mt-4"> <span class="flex items-center mb-1 text-lg font-bold 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-3 h-3 stroke-current ml-2 transition-all ease-in-out duration-200 transform"
          viewBox="0 0 13 15"
          fill="none"
          stroke-width="2.4"
        >
          <g stroke-linecap="round" stroke-linejoin="round">
            <polyline class="transition-all duration-200 ease-out opacity-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" x1="10.8333333" y1="5.5" x2="0.833333333" y2="5.16666667"></line>
          </g>
        </svg>
      </span>
      <span class="text-sm text-neutral-600 dark:text-neutral-400 block line-clamp-2 leading-relaxed">
        {description}
      </span>
    </span>
  </span>
</a>