---
import Logo from "@components/images/Logo.astro"

interface Props {
  title?: string;
  description?: string;
  url?: string;
  logoUrlLight?: string;
  logoUrlDark?: string;
}

const { title, description, url, logoUrlLight }: Props = Astro.props;
const logoUrlDark = Astro.props.logoUrlDark || logoUrlLight;
---

<div class="smooth-reveal-2 group flex flex-col">
  <a
    class="card-base flex items-center h-30 w-100 md:w-75"
    href={url}
    data-astro-prefetch
  >
    <div class="p-5 w-full">
      <div class="flex items-center">
        {logoUrlLight && (
        <div class="card-hover-icon-scale">
          <Logo
            srcLight={logoUrlLight}
            srcDark={logoUrlDark}
            alt={`Logo of ${title}`}
          />
        </div>
        )}
        <div class="ms-5 grow text-left">
          <span class="card-text-title card-hover-text-title block text-lg">
            {title}
          </span>
          <p class="card-text-description block mt-1">
            {description}
          </p>
        </div>
      </div>
    </div>
  </a>
</div>