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

export default function save({ attributes }) {
	const { audioUrl, title, caption } = attributes;

	if (!audioUrl) {
		return null;
	}

	return (
		<div {...useBlockProps.save({ className: "audio-player" })}>
			<RichText.Content
				value={title}
				className="audio-player__title"
				tagName="h4"
			/>
			<audio className="js-plyr" src={audioUrl} preload="metadata">
				Votre navigateur ne supporte pas l'élément audio.
			</audio>

			<p className="audio-player__details">
				<span className="audio-player__details__label">Audio</span>
				<span className="audio-player__details__caption">{caption ?? ""}</span>
			</p>
		</div>
	);
}
