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

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

// If href is provided, use 'a' tag instead of the default or provided tag
const Component = href ? 'a' : Tag

const images = import.meta.glob<{ default: ImageMetadata }>('/src/assets/*.{jpeg,jpg,png,gif}')

if (imagePath) {
	if (!images[imagePath])
		throw new Error(`"${imagePath}" does not exist in glob: "src/assets/*.{jpeg,jpg,png,gif}"`)
}
---

<Component
	class={cn(
		className,
		'relative rounded-2xl border border-border bg-primary-foreground px-5 py-3',
		href && 'transition-all hover:border-foreground/25 hover:shadow-sm'
	)}
	href={href}
	target={target}
>
	{
		imagePath && (
			<Image
				src={images[imagePath]()}
				alt={altText}
				class={cn('mb-3 md:absolute md:mb-0', imageClass)}
				loading='eager'
			/>
		)
	}
	<div class='flex flex-col gap-y-1.5'>
		<div class='flex flex-col gap-y-0.5'>
			<h1 class='text-lg font-medium'>{heading}</h1>
			{subheading && <h2 class='text-muted-foreground'>{subheading}</h2>}
			{date && <h2 class='text-muted-foreground'>{date}</h2>}
		</div>
		<slot />
	</div>
</Component>
