---
import Tag from './Tag.astro'

interface Props {
  pubDate: Date
  slug: string
  title: string
  tags: { name: string, slug: string }[]
}
const { pubDate, slug, title, tags } = Astro.props
---

<div class="note">
  <div class="date">{pubDate.toLocaleDateString("ru", {year: "numeric", month: "long", day: "numeric"})}</div>
  <div class="dash">—</div>
  <a href={`/notes/${slug}/`}>{ title }</a>
  {tags.map(tag => <Tag slug={tag.slug} name={tag.name} />)}
</div>

<style>
  .note {
    margin-bottom: 15px;
    display: flex;
    flex-direction: column;
    gap: 6px;
  }
  .dash {
    display: none;
  }

  @media screen and (min-width: 700px) {
    .note {
      flex-direction: row;
      margin-bottom: 5px;
    }
    .dash {
      display: block;
    }
  }
</style>