import cx from "classnames";
import type { HTMLAttributes } from "react";
import React from "react";

import { Icon } from "../Icon";

const CLASS_ROOT = "avatar";

export interface AvatarProps extends HTMLAttributes<HTMLDivElement> {
  alt?: string;
  iconName?: string;
  src: string;
}

export const Avatar: React.FC<AvatarProps> = ({
  alt = "",
  className,
  iconName,
  src,
  ...other
}) => {
  const hasDecoration = Boolean(iconName);
  const classes = cx(CLASS_ROOT, className);

  return (
    <div className={classes} {...other}>
      {hasDecoration && (
        <span className={`${CLASS_ROOT}__icon`} aria-hidden="true">
          <Icon name={iconName!} size="small" />
        </span>
      )}
      <img className={`${CLASS_ROOT}__image`} src={src} alt={alt} />
    </div>
  );
};

Avatar.displayName = "Avatar";