---
import type { VideoFileType } from '../lib/video';
import YouTubeAlert from './YouTubeAlert.astro';

export interface Props {
  video: VideoFileType;
}

const { video } = Astro.props;
const { frontmatter, author } = video;
---

<div class='border-b bg-white py-5 sm:py-12'>
  <div class='container text-left sm:text-center'>
    <p
      class='hidden items-center justify-start text-gray-400 sm:flex sm:justify-center'
    >
      <a
        href={`/authors/${author.id}`}
        class='inline-flex items-center font-medium hover:text-gray-600 hover:underline'
      >
        <img
          alt={author.frontmatter.name}
          src={author.frontmatter.imageUrl}
          class='mr-2 inline h-5 w-5 rounded-full'
        />
        {author.frontmatter.name}
      </a>
      <span class='mx-1.5'>&middot;</span>
      <span class='capitalize'>Illustrated Video</span>
    </p>
    <h1 class='my-0 text-2xl font-bold sm:my-3.5 sm:text-5xl'>
      {frontmatter.title}
    </h1>
    <p class='text-md hidden text-gray-400 sm:block'>
      {frontmatter.description}
    </p>
  </div>
</div>