---
import type { BreadcrumbSegment } from '@lib/types/content';

interface Props {
  breadcrumbs: BreadcrumbSegment[];
  publicationDate: string;
}

const { breadcrumbs, publicationDate } = Astro.props;
---

<div class="overline ui dark">
  <div class="wrapper">
    <nav aria-label="breadcrumb">
      <ol class="breadcrumbs">
        <li class="crumb">
          <a href="/" class="link">dave-dmg.de</a>
        </li>
        {
          breadcrumbs.map((crumb) => (
            <li class="crumb">
              <span class="separator">/</span>
              <a href={crumb.href} class="link">
                {crumb.label}
              </a>
            </li>
          ))
        }
      </ol>
    </nav>
    <time class="publicationdate">
      ⟫ {publicationDate}
    </time>
  </div>
</div>

<style>
  .overline {
    @mixin typo_code;

    color: var(--color-text-secondary);
    background-color: var(--color-surface-elevated-2);
  }

  .wrapper {
    @mixin layout-wrapper;
    @mixin py var(--size-4);

    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .breadcrumbs {
    display: flex;
  }

  .link {
    transition: color 0.5s ease-in-out;

    &:hover {
      color: var(--color-primary);
    }
  }

  .publicationdate {
    font-weight: 700;
  }
</style>
