---
interface Props {
  tags: string[];
  updateDate?: string;
}

const { tags, updateDate } = Astro.props;
---

<div class="meta">
  <div class="section">
    <span class="label"> Author </span>
    <span class="author item">Dave Damage</span>
  </div>
  {
    tags && tags.length > 0 && (
      <div class="section">
        <span class="label">Tags</span>
        <ul class="taglist">
          {tags.map((tag) => (
            <li class="tag item">{tag}</li>
          ))}
        </ul>
      </div>
    )
  }
  {
    updateDate && (
      <div class="section">
        <span class="label">Last Update</span>
        <time class="updatedate item">{updateDate}</time>
      </div>
    )
  }
</div>
<style>
  .meta {
    @mixin layout-wrapper;
    flex-wrap: wrap;
    display: flex;
    align-items: baseline;
    gap: var(--spacing-relaxed);
  }
  .section {
    min-width: 12ch;
    @mixin py var(--spacing-snug);
    flex: 1 0 auto;
  }
  .label {
    @mixin mb var(--spacing-tight);
    @mixin pb var(--spacing-tight);
    @mixin border-b 2px, solid, var(--color-border-strong);
    display: block;
    font-size: var(--typo-size-xs);
    text-transform: uppercase;
    letter-spacing: var(--typo-spacing-comfortable);
  }
  .item {
    font-family: var(--font-mono);
    font-size: var(--font-size-sm);
    font-weight: 700;
    color: var(--color-text-secondary);
    text-transform: uppercase;
  }
  .taglist {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-tight);
  }
  .tag {
    @mixin py var(--spacing-tight);
    @mixin px var(--spacing-snug);
    border: 4px solid var(--color-palette-charcoal-gray);
    letter-spacing: var(--typo-spacing-relaxed);
    background: var(--color-palette-charcoal-gray);
    color: var(--color-palette-off-white);
  }
</style>
