import React from "react";
import { Icon } from "@iconify/react";

interface AvatarProps {
  src?: string;
  username: string;
  size?: "small" | "medium" | "large";
}

export const Avatar: React.FC<AvatarProps> = ({
  src,
  username,
  size = "medium",
}) => {
  const sizeClasses = {
    small: "avatar-small",
    medium: "avatar-medium",
    large: "avatar-large",
  };

  if (src) {
    return (
      <div className={`avatar ${sizeClasses[size]}`}>
        <img src={src} alt={username} loading="lazy" />
      </div>
    );
  }

  const initials = username
    .split(" ")
    .map((word) => word[0])
    .join("")
    .substring(0, 2)
    .toUpperCase();

  return (
    <div className={`avatar avatar-placeholder ${sizeClasses[size]}`}>
      {initials || <Icon icon="mdi:account" />}
    </div>
  );
};
