---
import { ProfileIcon } from '../Icons';
export interface Props {
  type:        'photo' | 'initials';
  name: string;
  image?: string;
}
const { type, name, image } = Astro.props;
---

<div class={`avatar`}>
  {type === 'photo' && image ? (
    <div class="avatar__content avatar__content--photo">
      <img
        src={image}
        alt={name}
        class="avatar__content"
        onerror="this.style.display='none'; this.nextElementSibling.style.display='flex';"
      />
      <span class="avatar__fallback" style="display:none;">
        <ProfileIcon size={24}/>
      </span>
    </div>
  ) : (
    <span class="avatar__content">{name.split(' ').map(word => word[0]).join('').toUpperCase()}</span>
  )}
</div>

<style lang="scss">
@use './_avatar.scss';
</style>