<Docs title="Default" background="dark">
	<MediaCard {...props} client:load />
</Docs>

<Docs title="With Image" background="dark">
	<MediaCard {...props} media={{ maybeImage: image }} client:load />
</Docs>

<Docs title="With Pictogram" background="dark">
	<MediaCard {...props} media={{ maybeImage: picto.maybeImage! }} client:load />
</Docs>

<Docs title="With Text" background="dark">
	<MediaCard {...props} text={text} media={{ maybeImage: image }} client:load />
</Docs>

<Docs title="With Link" background="dark">
	<MediaCard {...props} link={link} media={{ maybeImage: image }} client:load />
</Docs>

<Docs title="With Long Text" background="dark">
	<MediaCard {...props} text={textLong} media={{ maybeImage: image }} client:load />
</Docs>

<Docs title="Media Position Right" background="dark">
	<MediaCard {...props} text={text} media={{ maybeImage: image }} mediaPosition="right" client:load />
</Docs>

<Docs title="With Pictogram and Link" background="dark">
	<MediaCard {...props} link={link} media={{ maybeImage: picto.maybeImage! }} client:load />
</Docs>

<style>
.MediaCard {
	width: 100%;
	max-width: 600px;
}
</style>