---
import Avatar from './Avatar.astro';
import type { UserPublic } from '../lib/db';

interface Props {
  users: UserPublic[];
  max?: number;
  size?: number;
  /** Border color between overlapping avatars — defaults to --surface for cream surfaces. */
  borderColor?: string;
}

const { users, max = 5, size = 22, borderColor = 'var(--surface)' } = Astro.props;

const shown = users.slice(0, max);
const overflow = Math.max(0, users.length - shown.length);
---
<div class="pile" style={`--pile-size: ${size}px; --pile-border: ${borderColor};`}>
  {shown.map((u, i) => (
    <span class="pile-slot" style={`z-index: ${shown.length - i}`}>
      <Avatar id={u.id} name={u.name} size={size} />
    </span>
  ))}
  {overflow > 0 && (
    <span class="pile-slot pile-overflow label-sm" aria-label={`${overflow} more`}>
      +{overflow}
    </span>
  )}
</div>

<style>
  .pile {
    display: inline-flex;
    align-items: center;
  }
  .pile-slot {
    display: inline-flex;
    border-radius: 50%;
    box-shadow: 0 0 0 1.5px var(--pile-border);
  }
  .pile-slot:not(:first-child) {
    margin-left: calc(var(--pile-size) * -0.32);
  }
  .pile-overflow {
    width: var(--pile-size);
    height: var(--pile-size);
    background: var(--ink-muted);
    color: var(--ink);
    align-items: center;
    justify-content: center;
    font-family: var(--font-sans);
    letter-spacing: var(--tracking-wide);
    font-weight: 600;
    font-size: calc(var(--pile-size) * 0.36);
  }
</style>