<script setup lang="ts">
import dayjs from 'dayjs'

import AutoLink from '../base/AutoLink.vue'

export interface Article {
	path: string
	thumbnail: string
	title: string
	summary: string
	date: string
}

defineProps<{
	article: Article
}>()
</script>

<template>
	<AutoLink
		:to="article.path"
		class="active:scale-[0.99]! group flex flex-col transition-all ease-in-out hover:brightness-125 cursor-pointer"
	>
		<article class="flex h-full grow flex-col gap-4">
			<img
				:src="article.thumbnail"
				class="aspect-video w-full rounded-xl border-[1px] border-solid border-button-border object-cover"
			/>
			<div class="flex grow flex-col gap-2">
				<h3 class="m-0 text-base leading-tight group-hover:underline">
					{{ article.title }}
				</h3>
				<p v-if="article.summary" class="m-0 text-sm leading-tight text-primary">
					{{ article.summary }}
				</p>
				<div class="mt-auto text-sm text-secondary">
					{{ dayjs(article.date).format('MMMM D, YYYY') }}
				</div>
			</div>
		</article>
	</AutoLink>
</template>
