<template>
  <a
    :href="url"
    target="_blank"
    rel="noopener noreferrer"
    class="group block border border-white/10 rounded-lg p-6 transition-all duration-300 hover:border-white/30 hover:bg-white/[0.03]"
  >
    <div class="flex items-start justify-between gap-4">
      <div>
        <h3 class="font-mono font-medium text-lg text-white group-hover:text-white transition-colors">
          {{ title }}
        </h3>
        <p class="mt-1 text-sm text-white/50 font-mono">{{ domain }}</p>
        <p class="mt-3 text-white/60 leading-relaxed">{{ description }}</p>
      </div>
      <svg
        class="w-5 h-5 text-white/20 group-hover:text-white/60 transition-all duration-300 group-hover:translate-x-0.5 group-hover:-translate-y-0.5 shrink-0 mt-1"
        fill="none"
        viewBox="0 0 24 24"
        stroke="currentColor"
        stroke-width="1.5"
      >
        <path stroke-linecap="round" stroke-linejoin="round" d="M4.5 19.5l15-15m0 0H8.25m11.25 0v11.25" />
      </svg>
    </div>
  </a>
</template>

<script setup lang="ts">
defineProps<{
  title: string
  domain: string
  url: string
  description: string
}>()
</script>
