---
import type { EndpointVideoPreview } from "src/shared/payload/endpoint-types";
import { formatLocale } from "src/utils/format";

interface Props {
  video: EndpointVideoPreview;
  class?: string | undefined;
}

const {
  video: { url, thumbnail, mimeType, subtitles },
  ...otherProps
} = Astro.props;
---

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

<video
  controls
  poster={thumbnail?.url}
  crossorigin="anonymous"
  {...otherProps.class ? otherProps : {}}>
  <source src={url} type={mimeType} />
  {
    subtitles.map(({ language, url }) => (
      <track label={formatLocale(language)} src={url} kind="subtitles" srclang={language} />
    ))
  }
</video>

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

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