---
import type { ContributorInfo } from '../../lib/theme';

interface Props {
  contributors?: ContributorInfo[];
  lastUpdated?: Date | boolean;
  title: string;
}

const {
  contributors = [],
  lastUpdated,
  title: _title,
} = Astro.props;
const t = Astro.locals.t;
const currentLocale = t.locale();
const updatedAt = lastUpdated instanceof Date && !Number.isNaN(lastUpdated.getTime())
  ? lastUpdated
  : undefined;
const allContributors = contributors.filter((contributor) => contributor.name);
const visibleContributors = allContributors.slice(0, 6);
const hiddenContributorCount = Math.max(0, allContributors.length - visibleContributors.length);

function getInitials(name: string): string {
  return name
    .split(/[\s-]+/)
    .filter(Boolean)
    .slice(0, 2)
    .map((part) => part[0]?.toUpperCase())
    .join('');
}

function formatDate(date: Date): string {
  return new Intl.DateTimeFormat(currentLocale.lang, {
    day: 'numeric',
    month: 'short',
    year: 'numeric',
  }).format(date);
}

const avatarClass = 'lotus-focus-ring relative inline-flex h-7 w-7 shrink-0 items-center justify-center overflow-hidden rounded-full border-2 border-(--lotus-background) bg-(--lotus-gray-soft) text-[0.6875rem] font-medium text-(--lotus-text-muted) transition-transform hover:z-10 hover:-translate-y-0.5 hover:text-(--lotus-text-strong)';
---

{(updatedAt || visibleContributors.length > 0) && (
  <div class="my-4 flex items-center justify-between gap-4 text-sm text-(--lotus-text-muted)">
    <div class="min-w-0">
      {updatedAt && (
        <p>
          {t('pageMeta.lastUpdated', { date: formatDate(updatedAt) })}
        </p>
      )}
    </div>

    {visibleContributors.length > 0 && (
      <div class="shrink-0">
        <div aria-label={t('pageContributors.title')} class="flex items-center justify-end">
          <ul class="-space-x-2 px-px py-1" role="list">
            {visibleContributors.map((contributor) => {
              const content = contributor.avatarUrl ? (
                <img
                  alt=""
                  class="h-full w-full object-cover"
                  loading="lazy"
                  src={contributor.avatarUrl}
                />
              ) : (
                <span aria-hidden="true">{getInitials(contributor.name)}</span>
              );

              return (
                <li class="inline-flex" title={contributor.name}>
                  {contributor.profileUrl ? (
                    <a
                      aria-label={contributor.name}
                      class={avatarClass}
                      href={contributor.profileUrl}
                      rel="noreferrer"
                      target="_blank"
                    >
                      {content}
                    </a>
                  ) : (
                    <span class={avatarClass}>{content}</span>
                  )}
                </li>
              );
            })}
            {hiddenContributorCount > 0 && (
              <li class="inline-flex">
                <span class={avatarClass}>+{hiddenContributorCount}</span>
              </li>
            )}
          </ul>
          <span class="sr-only">{t('pageContributors.title')}</span>
        </div>
      </div>
    )}
  </div>
)}