<script lang="ts">
	import {
		Card,
		CardBody,
		CardText,
		CardTitle,
	} from "@sveltestrap/sveltestrap";

	export let image: string;
	export let alt: string;
	export let title: string;
</script>

<div class="col">
	<Card>
		<picture class="card-img-top">
			<source
				srcset="/previews/{image}-light.webp"
				media="(prefers-color-scheme: light)"
			/>
			<source
				srcset="/previews/{image}-dark.webp"
				media="(prefers-color-scheme: dark)"
			/>
			<img class="card-img-top" src="/previews/{image}-light.webp" {alt} />
		</picture>
		<CardBody>
			<CardTitle>{title}</CardTitle>
			<CardText><slot /></CardText>
		</CardBody>
	</Card>
</div>
