---
import Badge from '../0_atoms/Badge.astro'
import Date from '../0_atoms/Date.astro'
import CopyLink from '../1_molecules/CopyLink.astro'
import DetailPageTitle from '../1_molecules/DetailPageTitle.astro'
import PostTypeLabel from '../1_molecules/PostTypeLabel.astro'
import type { PostType } from '../../lib/feed-types'

interface Props {
  title: string
  postType: PostType
  /** Omit with no tags and no `postId` to render title only (e.g. notes). */
  publishedAt?: Date | string
  updatedAt?: Date | string
  tags?: readonly string[]
  /** Pages pass a `Map`; gallery static args serialize to a plain object — both are supported. */
  tagCounts?: Map<string, number> | Record<string, number>
  postId?: string
  /** When `true`, shows the secret visibility marker beside the post type (content `secret: true`). */
  secret?: boolean
  class?: string
}

const {
  title,
  publishedAt,
  updatedAt,
  tags = [],
  tagCounts = {},
  postId,
  class: className,
  postType,
  secret = false,
} = Astro.props

function countForTag(tag: string): number {
  if (tagCounts instanceof Map) {
    return tagCounts.get(tag) ?? 0
  }
  return tagCounts[tag] ?? 0
}

const showMetaRow =
  publishedAt !== undefined || updatedAt !== undefined || tags.length > 0 || postId !== undefined
---

<header class:list={['post-header', 'text-sm', className]}>
  <div class="mb-1">
    <PostTypeLabel postType={postType} secret={secret} />
  </div>
  <DetailPageTitle title={title} />
  {
    showMetaRow && (
      <div class="mb-6 flex flex-wrap items-center gap-3">
        {updatedAt !== undefined && (
          <span class="inline-flex flex-wrap items-baseline gap-x-2">
            <span class="meta text-ink-faint">Updated</span>
            <Date date={updatedAt} />
          </span>
        )}
        {updatedAt === undefined && publishedAt !== undefined && <Date date={publishedAt} />}
        {tags.map(tag => (
          <Badge href={`/tags/${tag}`}>{`#${tag}`} ({countForTag(tag)})</Badge>
        ))}
        {postId !== undefined && <CopyLink permalink={`/-/${postId}`} />}
      </div>
    )
  }
</header>