<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-x-5 md:gap-2 items-center md:items-start md:flex-col md:border md:rounded-lg md:p-4 md:dark:border-slate-400"
  >
    <ULink :to="props.url" target="_blank">
      <NuxtImg
        placeholder
        :src="props.image"
        :alt="props.title"
        class="block min-w-[50px] w-[50px] md:w-16 h-[50px] md: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-sm text-slate-500 md:text-xs">
          <slot name="subtitle"></slot>
        </div>
      </div>
      <div class="text-sm md:block text-gray-600 hidden">
        <slot name="description">Lorem ipsum dorcet sit amet</slot>
      </div>
    </div>
  </div>
</template>
