{{/*
  Image card shortcode - creates a clickable card with image and title
  
  Usage:
  {{< image-card image="images/ai-cube.svg" alt="AI Redis icon" title="Redis vector database quick start guide" url="/develop/get-started/vector-database" >}}
  
  Parameters:
  - image: Path to the image file (required)
  - alt: Alt text for the image (required)
  - title: Title text to display below the image (required)
  - url: URL to link to when clicked (required)
  - class: Optional CSS class for the card container
*/}}

{{ $image := .Get "image" }}
{{ $alt := .Get "alt" }}
{{ $title := .Get "title" }}
{{ $url := .Get "url" }}
{{ $class := .Get "class" | default "" }}

{{/* Handle internal vs external URLs */}}
{{ $finalUrl := $url }}
{{ if and (not (hasPrefix $url "http")) (not (hasPrefix $url "//")) }}
  {{ $finalUrl = relref . $url }}
{{ end }}

<a href="{{ $finalUrl }}" class="image-card-link block no-underline hover:no-underline text-inherit hover:text-inherit h-full">
  <div class="image-card flex flex-col items-center text-center p-4 border border-redis-pen-300 rounded-lg hover:border-redis-red-500 hover:shadow-md transition-all duration-200 h-full {{ $class }}">
    <div class="image-card-img-container mb-4 flex-shrink-0">
      <img src="{{ relURL $image }}" alt="{{ $alt }}" class="image-card-img w-28 h-28 object-contain">
    </div>
    <span class="image-card-title text-sm font-medium text-redis-ink-900 hover:text-redis-red-500 transition-colors flex-grow flex items-end">{{ $title }}</span>
  </div>
</a>