---
import { pigmentForId, initialsFromName } from '../lib/format';

interface Props {
  id: number;
  name: string;
  size?: number;
  tinted?: boolean;
}

const { id, name, size = 32, tinted = true } = Astro.props;
const pigment = pigmentForId(id);

const style = tinted
  ? `--avatar-bg: ${pigment.token}; --avatar-size: ${size}px;`
  : `--avatar-bg: var(--surface-container); --avatar-size: ${size}px;`;
---
<span
  class="avatar"
  style={style}
  data-pigment={pigment.name}
  aria-hidden="true"
  title={name}
>{initialsFromName(name)}</span>

<style>
  .avatar {
    width: var(--avatar-size);
    height: var(--avatar-size);
    border-radius: 50%;
    background: var(--avatar-bg);
    color: var(--on-primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-serif);
    font-style: italic;
    font-size: calc(var(--avatar-size) * 0.40);
    line-height: 1;
    flex-shrink: 0;
    user-select: none;
  }
</style>
