---
import '@styles/global.css';
import { Image } from 'astro:assets';

const { icon, title, description, href } = Astro.props;
---

<a
    aria-label={`Learn more about ${title}`}
    class="opensourcecard group relative flex w-full items-start border border-dashed border-[var(--color-gray-3)] px-4 py-4 lg:px-8 lg:py-8 bg-[#FAFAFA] no-underline hover:bg-white hover:cursor-pointer transition-colors duration-200"
    href={href}
    rel="noopener noreferrer"
    target="_blank"
>
    <div class="grid grid-cols-[1fr_24px] gap-1 w-full">
      <div class="flex flex-col gap-4 items-start">
          <div class="flex gap-1.5 items-center">
              <Image
                  alt={`${title} Icon`}
                  class="w-6 h-6"
                  src={icon}
              />
              <p class="text-lg font-semibold text-[var(--color-dark-blue-1)] m-0">{title}</p>
          </div>
          <p class="text-sm font-sans text-[var(--color-gray-1)] m-0">{description}</p>
      </div>
      <div class="flex items-center justify-end">
          <div class="opacity-0 group-hover:opacity-100 transform transition-opacity duration-200">
              <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-gray-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                  <path stroke-linecap="round" stroke-linejoin="round" d="M13.5 4.5 21 12m0 0-7.5 7.5M21 12H3"></path>
              </svg>
          </div>
      </div>
    </div>
</a>
