---
import { Picture } from "@astrojs/image/components";

export interface Props {
	src: string;
	alt?: string;
}

const { src, alt } = Astro.props as Props;
---

<div class="cover">
	<figure>
		<Picture
			itemprop="image"
			src={src}
			sizes="(max-width: 450px) 450px, 700px"
			widths={[450, 700]}
			formats={["webp"]}
			aspectRatio={"16:9"}
			alt={alt ? alt : ""}
			background={"chocolate"}
		/>
	</figure>
</div>

<style lang="scss">
	.cover {
		margin: 20px 0;
		& figure {
			margin: 0;
		}
	}
</style>