---
import cx from 'classnames';

import { Picture } from '@astrojs/image/components';
import type { PictureComponentLocalImageProps } from '@astrojs/image/components';

interface Props extends PictureComponentLocalImageProps {
	class?: string;
	noMargin?: boolean;
	slot?: string;
}

const { class: className, noMargin, ...props } = Astro.props;

const classes = cx(
	'image-shadow block h-auto w-full rounded-1 border-1 border-solid border-black/[0.1] bg-black/[0.1] shadow shadow-black/10 mbe-10 mbs-0 dark:border-white/[0.1] dark:opacity-[0.87] dark:shadow-white/10',
	{ 'mbe-0': noMargin },
	className
);
---

<div class={classes}>
	<Picture {...props} />
</div>
