Avatar

'use client';
import {
  Avatar,
  AgentAvatar,
  RuntimeAvatar,
  AvatarBadge,
  AvatarGroupCount,
  type AvatarSize,
  type RuntimeAvatarSize,
  type StatusDotStatus,
} from '@mbsw/ui';
export default function Demo() {
  const settings = {
    "isMe": false,
    "isDeactivated": false,
    "showBadge": false,
    "avatarKind": "person",
    "avatarType": "default",
    "status": "online",
    "size": "md"
  };
  // A self-contained sample image keeps the copied example independent of network access.
  const image =
    'data:image/svg+xml,' +
    encodeURIComponent(
      '<svg xmlns="http://www.w3.org/2000/svg" width="96" height="96" viewBox="0 0 96 96"><rect width="96" height="96" fill="#dedbff"/><circle cx="48" cy="36" r="16" fill="#7565db"/><path d="M16 96v-12a32 32 0 0 1 64 0v12" fill="#7565db"/></svg>',
    );
  // RuntimeAvatar fills its image frame. Keep breathing room in the sample asset,
  // matching the service pattern of a smaller, centered runtime mark.
  const runtimeImage =
    'data:image/svg+xml,' +
    encodeURIComponent(
      '<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="-3 -3 20 20"><style>path{fill:#000}@media(prefers-color-scheme:dark){path{fill:#fff}}</style><path fill-rule="evenodd" clip-rule="evenodd" d="M5.53184 5.23881V4.05231C5.53184 3.95256 5.56964 3.87748 5.65679 3.82761L8.04187 2.45421C8.36684 2.26678 8.75377 2.17963 9.15329 2.17963C10.6516 2.17963 11.6008 3.34093 11.6008 4.57678C11.6008 4.66446 11.6008 4.76421 11.5882 4.86396L9.11549 3.41548C9.04834 3.37274 8.9704 3.35003 8.89079 3.35003C8.81119 3.35003 8.73324 3.37274 8.66609 3.41548L5.53184 5.23881ZM11.1016 9.85881V7.02486C11.1016 6.85003 11.0265 6.72561 10.8763 6.63793L7.74209 4.81461L8.76584 4.22766C8.80295 4.20325 8.84638 4.19024 8.89079 4.19024C8.93521 4.19024 8.97864 4.20325 9.01574 4.22766L11.4008 5.60158C12.088 6.00058 12.55 6.85003 12.55 7.67428C12.55 8.62348 11.9883 9.49761 11.101 9.85986L11.1016 9.85881ZM4.79527 7.36243L3.77152 6.76288C3.68384 6.71301 3.64604 6.63793 3.64604 6.53818V3.79033C3.64604 2.45421 4.66979 1.44253 6.05632 1.44253C6.58132 1.44253 7.06799 1.61736 7.48012 1.92973L5.01997 3.35353C4.87034 3.44068 4.79527 3.56563 4.79527 3.74046V7.36191V7.36243ZM6.99922 8.63556L5.53184 7.81131V6.06306L6.99922 5.23881L8.46659 6.06306V7.81131L6.99922 8.63556ZM7.94212 12.4313C7.41712 12.4313 6.93044 12.257 6.51832 11.9446L8.97847 10.5208C9.12809 10.4337 9.20317 10.3087 9.20317 10.1339V6.51246L10.2395 7.11201C10.3272 7.16188 10.3645 7.23696 10.3645 7.33671V10.084C10.3645 11.4202 9.32812 12.4313 7.94212 12.4313ZM4.98269 9.64723L2.59709 8.27331C1.91039 7.87378 1.44839 7.02486 1.44839 6.20061C1.44677 5.73227 1.58495 5.2741 1.84524 4.88475C2.10552 4.49539 2.47608 4.19257 2.90947 4.01503V6.86211C2.90947 7.03693 2.98454 7.16188 3.13417 7.24956L6.25634 9.06028L5.23259 9.64723C5.19552 9.67171 5.15207 9.68476 5.10764 9.68476C5.06322 9.68476 5.01977 9.67171 4.98269 9.64723ZM4.84514 11.6947C3.43394 11.6947 2.39759 10.6337 2.39759 9.32226C2.39759 9.22251 2.41019 9.12276 2.42227 9.02301L4.88242 10.4458C5.03257 10.5334 5.18219 10.5334 5.33182 10.4458L8.46607 8.63556V9.82206C8.46607 9.92181 8.42932 9.99688 8.34164 10.0468L5.95657 11.4202C5.63159 11.6076 5.24467 11.6947 4.84514 11.6947ZM7.94212 13.1805C8.66166 13.1805 9.35914 12.9321 9.91658 12.4771C10.474 12.0221 10.8572 11.3885 11.0013 10.6836C12.3999 10.3213 13.2992 9.00936 13.2992 7.67376C13.2992 6.79963 12.9249 5.95071 12.2503 5.33856C12.3127 5.07606 12.35 4.81408 12.35 4.55211C12.35 2.76658 10.9015 1.42993 9.22837 1.42993C8.89132 1.42993 8.56687 1.47981 8.24137 1.59268C7.65862 1.01907 6.87454 0.696283 6.05684 0.693359C5.33723 0.693326 4.63969 0.941876 4.08224 1.39696C3.5248 1.85204 3.14166 2.48572 2.99767 3.19078C1.59854 3.55303 0.699219 4.86448 0.699219 6.20061C0.699219 7.07526 1.07354 7.92418 1.74817 8.53581C1.68569 8.79831 1.64842 9.06081 1.64842 9.32278C1.64842 11.1083 3.09689 12.4444 4.77007 12.4444C5.10712 12.4444 5.43157 12.3946 5.75707 12.2822C6.33989 12.856 7.12422 13.1789 7.94212 13.1815V13.1805Z"/></svg>',
    );
  const common = {
    label: settings.avatarKind === 'runtime' ? 'Codex' : 'User A',
    isMe: settings.isMe,
    isDeactivated: settings.isDeactivated,
  };
  const state =
    settings.avatarType === 'error'
      ? { type: 'error' as const, errorTooltip: "Couldn't load the image." }
      : settings.avatarType === 'image'
        ? { type: 'image' as const, src: image }
        : { type: 'default' as const };
  const size = settings.size as AvatarSize;
  const initials = 'A';
  if (settings.avatarKind === 'group') {
    return (
      <AvatarGroupCount total={8} avatars={3} aria-label="Users">
        {['A', 'B', 'C'].map((initial) => (
          <Avatar key={initial} label={`User ${initial}`} initials={initial} />
        ))}
      </AvatarGroupCount>
    );
  }
  if (settings.showBadge) {
    const badge = {
      ...common,
      status: settings.status as StatusDotStatus,
      statusLabel: settings.status,
    };
    if (settings.avatarKind === 'runtime')
      return (
        <AvatarBadge
          {...badge}
          type="runtime"
          src={runtimeImage}
          size={settings.size as RuntimeAvatarSize}
        />
      );
    if (settings.avatarKind === 'agent')
      return <AvatarBadge {...badge} type="agent" size={size} />;
    return <AvatarBadge {...badge} initials={initials} size={size} />;
  }
  if (settings.avatarKind === 'runtime')
    return (
      <RuntimeAvatar
        {...common}
        size={settings.size as RuntimeAvatarSize}
        {...(settings.avatarType === 'error'
          ? {
              type: 'error' as const,
              errorTooltip: "Couldn't load the image.",
            }
          : { type: 'image' as const, src: runtimeImage })}
      />
    );
  if (settings.avatarKind === 'agent')
    return <AgentAvatar {...common} {...state} size={size} />;
  return state.type === 'default' ? (
    <Avatar {...common} initials={initials} size={size} />
  ) : (
    <Avatar {...common} {...state} size={size} />
  );
}