<script setup lang="ts">
interface Props {
  title: string;
  image: string;
  url: string;
  marketplace?: string;
}

const props = defineProps<Props>();
</script>

<template>
  <div class="flex overflow-auto gap-2 flex-col border rounded-lg p-4">
    <NuxtImg
      placeholder
      :src="props.image"
      :alt="props.title"
      class="block w-16 h-16"
    />
    <div>
      <ULink
        class="font-semibold hover:underline hover:underline-offset-4"
        :to="props.url"
        target="_blank"
        >{{ props.title }}</ULink
      >
      <div class="text-xs text-slate-600">
        <slot name="subtitle"></slot>
      </div>
    </div>
    <div class="text-sm">
      <slot name="description">Lorem ipsum dorcet sit amet</slot>
    </div>
  </div>
</template>
