---
import { blog, fmt } from '../../lib/data';
import { dateBadges, formatDate, isoDay, type DateBadge } from '../../lib/dates';
import Badge from '../Badge.astro';

export interface Props {
  pubDate: Date;
  updatedDate?: Date;
  /** Reading time in minutes, shown after the dates. */
  minutes?: number;
  class?: string;
}

const { pubDate, updatedDate, minutes, class: className } = Astro.props;
const { primary, secondary } = dateBadges(pubDate, updatedDate);

const meta = (b: DateBadge) =>
  b.kind === 'updated'
    ? { label: blog.dates.updated, icon: 'tabler:refresh' }
    : { label: blog.dates.created, icon: 'tabler:calendar-plus' };
const p = meta(primary);
const s = secondary && meta(secondary);
---

<div class:list={['flex flex-wrap items-center gap-2', className]}>
  <Badge variant="solid" icon={p.icon}>
    {p.label}
    <time datetime={isoDay(primary.date)}>{formatDate(primary.date)}</time>
  </Badge>
  {secondary && s && (
    <Badge variant="outline" icon={s.icon}>
      {s.label}
      <time datetime={isoDay(secondary.date)}>{formatDate(secondary.date)}</time>
    </Badge>
  )}
  {minutes && (
    <Badge variant="outline" icon="tabler:clock">
      {fmt(blog.card.readingTime, { n: minutes })}
    </Badge>
  )}
</div>