---
import { YouTube } from '@astro-community/astro-embed-youtube'
export interface Props {
  id: string
  thumbnail: string
}

const { id, thumbnail } = Astro.props
---

<div class="youtube-center">
  <noscript style="display: flex; justify-content: center;">
    <style>
      lite-youtube {
        display: none;
      }
    </style>
    <div class="warningtext">
      <span>
        To view the video, enable JavaScript or<br /><a
          href=`https://www.youtube.com/watch?v=${id}`
          target="_blank"
          rel="noopener noreferrer">watch it on YouTube</a
        >
      </span>
    </div>
  </noscript>
  <YouTube id={id} poster={thumbnail} />
</div>

<style>
  .youtube-center {
    width: 100%;
    display: flex;
    justify-content: center;
  }

  lite-youtube {
    width: 100%;
    max-height: 360px;
    max-width: 640px;
  }

  .warningtext {
    display: flex;
    justify-content: center;
    background-color: var(--c-darkgray);
    width: 640px;
    height: 360px;
  }

  span {
    text-align: center;
    margin-top: 20%;
  }

  span > a {
    font-style: unset;
    font-weight: bold;
  }
</style>