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

interface Props {
  contributors?: ContributorInfo[];
}

const { contributors = [] } = Astro.props;
const t = Astro.locals.t;
const visibleContributors = contributors.filter((contributor) => contributor.name);

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

function getCommitLabel(count: number): string {
  return t(
    count === 1
      ? 'pageContributors.commits.one'
      : 'pageContributors.commits.other',
    { count },
  );
}

const contributorClass = 'lotus-focus-ring inline-flex items-center gap-2 rounded-(--lotus-radius-md) border border-(--lotus-border-subtle) px-2.5 py-1.5 text-sm text-(--lotus-text-muted) transition-colors hover:border-(--lotus-border-muted) hover:bg-(--lotus-gray-soft) hover:text-(--lotus-text-strong)';
---

{visibleContributors.length > 0 && (
  <section class="lotus-border-subtle mt-6 border-t pt-6">
    <h2 class="text-sm font-medium text-(--lotus-text-strong)">
      {t('pageContributors.title')}
    </h2>
    <ul class="mt-3 flex flex-wrap gap-2">
      {visibleContributors.map((contributor) => {
        const content = (
          <>
            {contributor.avatarUrl ? (
              <img
                alt=""
                class="h-5 w-5 rounded-full"
                loading="lazy"
                src={contributor.avatarUrl}
              />
            ) : (
              <span
                aria-hidden="true"
                class="inline-flex h-5 w-5 shrink-0 items-center justify-center rounded-full bg-(--lotus-gray-soft) text-[0.625rem] font-medium text-(--lotus-text-muted)"
              >
                {getInitials(contributor.name)}
              </span>
            )}
            <span class="font-medium text-(--lotus-text)">{contributor.name}</span>
            <span class="text-xs text-(--lotus-text-muted)">
              {getCommitLabel(contributor.commits)}
            </span>
          </>
        );

        return (
          <li>
            {contributor.profileUrl ? (
              <a
                class={contributorClass}
                href={contributor.profileUrl}
                rel="noreferrer"
                target="_blank"
              >
                {content}
              </a>
            ) : (
              <span class={contributorClass}>{content}</span>
            )}
          </li>
        );
      })}
    </ul>
  </section>
)}