---
import { Image } from 'astro:assets'
import type { ImageMetadata } from 'astro'
import { cn } from '@/utils'

const {
	as: Tag = 'a',
	class: className,
	href,
	heading,
	subheading,
	imagePath,
	altText,
	target
} = Astro.props

let imageComponent = null
if (imagePath) {
	const images = import.meta.glob<{ default: ImageMetadata }>('/src/assets/*.{jpeg,jpg,png,gif}')
	if (images[imagePath]) {
		imageComponent = images[imagePath]
	}
}
---

<Tag
	class={cn(
		className,
		'flex flex-col rounded-2xl border border-border bg-primary-foreground h-[240px]',
		'justify-center items-center',
		href && 'transition-all hover:border-foreground/25 hover:shadow-sm'
	)}
	href={href}
	target={target}
>
	{
		imageComponent && (
			<Image
				src={imageComponent()}
				alt={altText}
				class='h-32 w-full rounded-2xl rounded-bl-none rounded-br-none object-cover'
				loading='eager'
			/>
		)
	}
	<div class='flex w-full flex-1 flex-col justify-center gap-y-2 px-5 py-4 text-center'>
		<h1 class='text-lg font-medium'>{heading}</h1>
		<h2 class='line-clamp-2 text-sm text-muted-foreground'>{subheading}</h2>
	</div>

	<slot />
</Tag>
