---
interface Props {
  title: string;
  date: Date;
  type?: string;
  readingTime?: number;
}

const { title, date, type = 'post', readingTime } = Astro.props;

const formattedDate = date.toLocaleDateString('en-US', {
  year: 'numeric',
  month: 'long',
  day: 'numeric',
});
const isoDate = date.toISOString().split('T')[0];
---

<header class="post-header">
  <span class="badge">{type}</span>
  <h1 class="title">{title}</h1>
  <p class="meta">
    <time datetime={isoDate}>{formattedDate}</time>{readingTime && ` · ${readingTime} min read`}
  </p>
</header>

<style>
  .post-header {
    max-width: var(--width-prose);
    margin-left: auto;
    margin-right: auto;
    padding-top: var(--space-8);
    padding-bottom: var(--space-8);
    text-align: center;
  }

  .badge {
    font-family: var(--font-structure);
    font-size: var(--type-xs);
    font-weight: 600;
    color: var(--accent-primary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
  }

  .title {
    font-family: var(--font-structure);
    font-size: var(--type-3xl);
    font-weight: 700;
    color: var(--text-primary);
    line-height: var(--leading-tight);
    letter-spacing: -0.02em;
    margin-top: var(--space-2);
  }

  .meta {
    font-family: var(--font-structure);
    font-size: var(--type-sm);
    font-weight: 400;
    color: var(--text-tertiary);
    line-height: var(--leading-normal);
    margin-top: var(--space-2);
  }

  @media (max-width: 719px) {
    .post-header {
      padding-top: var(--space-6);
      padding-bottom: var(--space-6);
    }

    .title {
      font-size: var(--type-2xl);
      line-height: var(--leading-snug);
    }
  }

  @media (max-width: 479px) {
    .post-header {
      padding-top: var(--space-5);
      padding-bottom: var(--space-5);
    }

    .title {
      font-size: var(--type-xl);
      line-height: var(--leading-snug);
    }
  }
</style>