<script lang="ts">
  interface Props {
    href: string;
    title: string;
    description: string;
    icon: string;
    color: string;
  }

  let { href, title, description, icon, color }: Props = $props();
</script>

<a
  {href}
  class="group block p-6 bg-white rounded-2xl border border-gray-100 card-hover"
>
  <div
    class="w-12 h-12 rounded-xl flex items-center justify-center mb-4 transition-transform group-hover:scale-110"
    style="background: {color}15;"
  >
    <span class="text-2xl">{icon}</span>
  </div>

  <h3 class="text-lg font-semibold text-gray-900 mb-2 group-hover:text-primary-600 transition-colors">
    {title}
  </h3>

  <p class="text-gray-600 text-sm leading-relaxed">
    {description}
  </p>

  <div class="mt-4 flex items-center text-primary-600 text-sm font-medium">
    <span>Learn more</span>
    <svg class="w-4 h-4 ml-1 transition-transform group-hover:translate-x-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
    </svg>
  </div>
</a>
