---
import {
  formatUiString,
  getPageLocale,
  getUiStrings,
} from '@levino/shipyard-base/i18n'

export interface Props {
  /**
   * URL to edit this page in the repository.
   */
  editUrl?: string
  /**
   * The date when this page was last updated.
   */
  lastUpdated?: Date
  /**
   * The name of the author who last updated this page.
   */
  lastAuthor?: string
}

const { editUrl, lastUpdated, lastAuthor } = Astro.props
const locale = getPageLocale(Astro.currentLocale)
const t = getUiStrings(locale)

const hasMetadata = editUrl || lastUpdated || lastAuthor

const formatDate = (date: Date): string => {
  return date.toLocaleDateString(locale, {
    year: 'numeric',
    month: 'long',
    day: 'numeric',
  })
}
---

{
  hasMetadata && (
    <div class="doc-metadata not-prose mt-8 pt-4 border-t border-base-300 text-sm text-base-content/70">
      <div class="flex flex-wrap items-center justify-between gap-4">
        <div class="flex flex-wrap items-center gap-4">
          {lastUpdated && (
            <span class="last-updated flex items-center gap-1.5">
              <svg
                xmlns="http://www.w3.org/2000/svg"
                class="h-4 w-4"
                fill="none"
                viewBox="0 0 24 24"
                stroke="currentColor"
                stroke-width="2"
              >
                <path
                  stroke-linecap="round"
                  stroke-linejoin="round"
                  d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"
                />
              </svg>
              <span>
                {t.lastUpdated} <time datetime={lastUpdated.toISOString()}>{formatDate(lastUpdated)}</time>
              </span>
            </span>
          )}
          {lastAuthor && (
            <span class="last-author flex items-center gap-1.5">
              <svg
                xmlns="http://www.w3.org/2000/svg"
                class="h-4 w-4"
                fill="none"
                viewBox="0 0 24 24"
                stroke="currentColor"
                stroke-width="2"
              >
                <path
                  stroke-linecap="round"
                  stroke-linejoin="round"
                  d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"
                />
              </svg>
              <span>{formatUiString(t.lastUpdatedBy, { author: lastAuthor })}</span>
            </span>
          )}
        </div>
        {editUrl && (
          <a
            href={editUrl}
            target="_blank"
            rel="noopener noreferrer"
            class="edit-link link link-primary flex items-center gap-1.5 hover:underline"
          >
            <svg
              xmlns="http://www.w3.org/2000/svg"
              class="h-4 w-4"
              fill="none"
              viewBox="0 0 24 24"
              stroke="currentColor"
              stroke-width="2"
            >
              <path
                stroke-linecap="round"
                stroke-linejoin="round"
                d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"
              />
            </svg>
            <span>{t.editThisPage}</span>
          </a>
        )}
      </div>
    </div>
  )
}