"use client"

import { avatarColor, senderInitial } from "@/lib/sender-display"
import { cn } from "@/lib/utils"

interface AccountAvatarProps {
  account: { name: string; email: string }
  size?: "sm" | "md" | "lg"
  className?: string
}

const sizeClasses = {
  sm: "size-8 text-sm",
  md: "size-10 text-base",
  lg: "size-20 text-3xl",
} as const

export function AccountAvatar({
  account,
  size = "md",
  className,
}: AccountAvatarProps) {
  const displayName = account.name || account.email
  const initial = senderInitial(displayName)
  const color = avatarColor(displayName)

  return (
    <div
      className={cn(
        "flex shrink-0 items-center justify-center rounded-full font-medium text-white",
        sizeClasses[size],
        className,
      )}
      style={{ backgroundColor: color }}
      aria-hidden
    >
      {initial}
    </div>
  )
}