---
import { Icon } from 'astro-icon/components';

interface Props {
  title?: string;
  description?: string;
  url?: string;
  icon?: string;
}

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

const sizeClasses = 'h-30 w-100 md:w-[300px]';
---

<div class="smooth-reveal-2 group flex flex-col">
  <a
    class={`card-base flex items-center ${sizeClasses}`}
    href={url}
    data-astro-prefetch
  >
    <div class="p-5 w-full">
      <div class="flex items-center">
        <Icon
          name={icon}
          class="card-hover-icon-scale shrink-0 h-6 w-6 md:h-8 md:w-8 "
        />
        <div class="ms-5 grow text-left">
          <span class="card-text-title card-hover-text-title block text-lg">
            {title}
          </span>
          <span class="card-text-description block mt-1">
            {description}
          </span>
        </div>
      </div>
    </div>
  </a>
</div>