---
import type { Post } from '../schemas/posts'
import Author from './Author.astro'

interface Props {
  entry: Post
}

const { entry } = Astro.props
const { authors, published_at, created_at } = entry

const dateC = new Date(published_at?published_at:created_at)
const dateISO = dateC.toISOString()
const dateLocal = dateC
  .toLocaleDateString( 
    "en-US", { 
      year: 'numeric', 
      month: 'long',
      day: 'numeric', 
      hour: '2-digit', 
      minute: '2-digit' 
    }
  )

const hasAuthors = authors !== undefined
---

<div class="metadata not-content">
  <time datetime={dateISO}>
    {dateLocal}
  </time>
  {
    hasAuthors ? (
      <div class="authors">
        {authors.map((author: any) => (
          <Author {author} />
        ))}
      </div>
    ) : null
  }
</div>

<style>
  .metadata {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
  }

  time {
    font-size: var(--sl-text-sm);
  }

  .authors {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem 1rem;
  }
</style>
