import React from "react";
import classNames from "classnames";

export type Props = {
  /**
   * The style avatar
   */
  className?: string;
  /**
   * The path of image
   */
  src?: string;
  /**
   * The alternative text in case the image is not valid
   */
  alt?: string;
  /**
   * The text inside avatar as a child
   */
  children?: React.ReactNode;
};

const Avatar = ({ className, src, alt, children }: Props) => {
  return (
    <div>
      {/* In case the src is valid, it will show the image */}
      {src && (
        <img
          className="h-9 w-9 bg-contain bg-no-repeat rounded-full"
          src={src}
          alt={alt}
        />
      )}
      {/* The text will be shown in case it is valid */}
      {children && (
        <div
          className={classNames(
            "h-9 w-9 flex justify-center items-center text-base rounded-full bg-red-400",
            className
          )}
        >
          {children}
        </div>
      )}
    </div>
  );
};

export default Avatar;