---
import type { BreadcrumbSegment } from '@lib/types/content';
import Overline from './Overline.astro';
import Title from './Title.astro';
import Meta from './Meta.astro';
import Cover from './Cover.astro';

interface Props {
  title: string;
  cover?: {
    src: string;
    alt: string;
    caption: string;
    showInHeader: boolean;
  };
  subtitle?: string;
  tags: string[];
  publishDate: string;
  updateDate?: string;
  breadcrumbs: BreadcrumbSegment[];
}

const { title, cover, subtitle, tags, publishDate, updateDate, breadcrumbs } =
  Astro.props;
const showCover = cover?.src && cover?.showInHeader;

---

<header class="wrapper">
  <Overline breadcrumbs={breadcrumbs} publicationDate={publishDate} />
  <Title title={title} subtitle={subtitle} />
  {
    showCover && (
      <Cover alt={cover.alt} src={cover.src} caption={cover?.caption} />
    )
  }
  <Meta tags={tags} updateDate={updateDate} />
</header>

<style>
  .wrapper {
    @mixin border-b 8px, solid, var(--color-border-strong);

    background-color: var(--color-surface-base);
  }
</style>
