---
import type { CollectionEntry } from 'astro:content';
import Picture from './Picture.astro';

interface Props {
	project: CollectionEntry<'projects'>;
}

const { project } = Astro.props;
---

{
	project.data.image &&
		(project.data.image.src.includes('.svg') ? (
			<div class="image-shadow mbe-10 mbs-0">
				<img class="image-border" alt={project.data.title} src={project.data.image.src} />
			</div>
		) : (
			<Picture
				alt={project.data.title}
				aspectRatio={project.data.image.aspectRatio as number | `${number}:${number}`}
				formats={['webp', 'avif']}
				widths={[300, 500, 700, 1000, 1200, 1500]}
				src={project.data.image.src}
			/>
		))
}
