---
import { themeConfig } from '@/config'
import { formatDate } from '@/utils/date'
import type { FormattedDateProps } from '@/types'

const {
  date,
  format,
  context = 'default'
} = Astro.props as FormattedDateProps & { context?: 'list' | 'post' | 'default' }
---

<time
  datetime={date.toISOString()}
  class={!themeConfig.date.dateOnRight &&
  (themeConfig.date.dateFormat === 'MONTH DAY YYYY' ||
    themeConfig.date.dateFormat === 'DAY MONTH YYYY') &&
  context === 'list'
    ? 'date-left'
    : ''}
>
  <Fragment set:html={formatDate(date, format)} />
</time>

<style>
  .date-left {
    display: inline-block;
    min-width: 86px;
    text-align: right;
  }
</style>