---
import { add, format } from "date-fns";

import CalendarIcon from "@assets/svg/calendar.svg";

interface Props {
  title: string;
  date: Date;
  slug?: string;
}

const { title, date, slug } = Astro.props;
---

<div class="blog-header">
  {slug ? <a href={`/blog/${slug}`}>{title}</a> : <h1>{title}</h1>}
  <div>
    <CalendarIcon class="calendar-icon" width={24} height={24} />
    <strong>{format(add(new Date(date), { hours: 6 }), "MMM do, y")}</strong>
  </div>
</div>

<style lang="scss">
  a {
    font-size: 1.3rem;
  }

  strong {
    font-weight: bolder;
  }

  .blog-header {
    margin: 1rem 0;
  }

  .blog-header > h2 {
    margin: 0;
  }

  .calendar-icon {
    transform: translateY(0.3rem);
  }
</style>