<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 items-center md:items-start md:flex-col md:border md:rounded-lg md:p-4"
  >
    <ULink :to="props.url" target="_blank">
      <NuxtImg
        placeholder
        :src="props.image"
        :alt="props.title"
        class="block w-16 h-16"
      />
    </ULink>
    <div class="grid row-span-3 gap-2">
      <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 md:block hidden">
        <slot name="description">Lorem ipsum dorcet sit amet</slot>
      </div>
    </div>
  </div>
</template>
