"use client";

import Avatar from "boring-avatars";
import { beamAvatarPalettes, type BeamAvatar } from "@/lib/beam-avatar";

export type UserAvatarProps = {
  avatar: BeamAvatar;
  size: number;
  className?: string;
  label?: string;
};

export function UserAvatar({ avatar, size, className, label }: UserAvatarProps) {
  const palette = beamAvatarPalettes[avatar.palette] ?? beamAvatarPalettes[0];

  return (
    <span
      className={className ? `user-avatar ${className}` : "user-avatar"}
      style={{ width: size, height: size }}
      role={label ? "img" : undefined}
      aria-label={label}
      aria-hidden={label ? undefined : true}
    >
      <Avatar
        name={avatar.seed}
        variant="beam"
        colors={[...palette.colors]}
        size={size}
      />
    </span>
  );
}