import { MediaPlaceholder } from "@wordpress/block-editor";

export default function Cover({ coverUrl, coverAlt, onSelect, aspectRatio }) {
	const ratioClass =
		aspectRatio && aspectRatio !== "auto"
			? ` narrative-card__cover--ratio-${String(aspectRatio).replace(
					/[/:]/g,
					"-"
			  )}`
			: "";
	return (
		<div className={`narrative-card__cover${ratioClass}`}>
			{coverUrl && <img src={coverUrl} alt={coverAlt} />}
			{!coverUrl && (
				<MediaPlaceholder
					accept="image/*"
					allowedTypes={["image"]}
					onSelect={onSelect}
					multiple={false}
					handleUpload={true}
				/>
			)}
		</div>
	);
}
