<template>
	<div
		class="
      flex
      m-2
      gap-2
      items-center
      shadow-md
      w-1/4
      flex-grow
      rounded
      overflow-hidden
    "
		style="border: 1px solid #eee"
	>
		<img
			src="https://via.placeholder.com/150"
			style="background: #cccccc"
			width="150"
			height="150"
			alt="placeholder"
		>
		<router-link :to="{ name: 'BlogPost', params: { id: post.id } }">
			{{ post.title }}<br>
			User: {{ post.userId }}
		</router-link>
	</div>
</template>
<script setup>
console.log('BlogCard')
const props = defineProps({
	post: {
		type: Object,
		required: true
	}
})
const post = { ...props.post }
</script>
