---
import type { EndpointAudioPreview } from "src/shared/payload/endpoint-types";

interface Props {
  audio: EndpointAudioPreview;
  class?: string | undefined;
}

const {
  audio: { url, mimeType },
  ...otherProps
} = Astro.props;
---

{/* ------------------------------------------- HTML ------------------------------------------- */}

<audio controls {...otherProps.class ? otherProps : {}}>
  <source src={url} type={mimeType} />
</audio>

{/* ------------------------------------------- CSS -------------------------------------------- */}

<style>
  audio {
    width: 100%;
    border-radius: 16px;
    box-shadow: 0 5px 20px -10px var(--color-shadow-0);
  }
</style>