---
import { LOCALE } from "@config";
import { Icon } from "astro-icon/components";
export interface Props {
  modDatetime?: string | null | Date;
  pubDatetime: string | Date;
  className?: string;
}

const { modDatetime, pubDatetime, className = "" } = Astro.props;

function formatToMonthDayYear(timeString: string | Date) {
  const date = new Date(timeString);
  return date.toLocaleDateString(LOCALE.langTag, {
    year: 'numeric',
    month: 'long',
    day: 'numeric'
  });
}

---

<div class={ className }>
  <Icon name="fa6-solid:calendar-days" title="Published" class="mr-1" /> <span>{ formatToMonthDayYear(pubDatetime) }</span>
  { modDatetime && modDatetime > pubDatetime && (
    <Icon name="fa6-solid:pencil" title="Modified" class="ml-2 mr-1" /> <span>{ formatToMonthDayYear(modDatetime) } </span>
  ) }
</div>