import React from "react";
import StyledAvatar from "./StyledAvatar";

export type StyledAvatarProps = {
  imgSrc?: string;
  size?: number;
  variant: "image" | "initial";
};

type AvatarProps = StyledAvatarProps & {
  name?: string;
  initialLength?: 1 | 2;
  props?: any;
};

const Avatar: React.FC<AvatarProps> = ({
  imgSrc,
  initialLength = 1,
  name,
  size = 56,
  variant = "initial",
  ...props
}) => {
  const initials = name
    ?.split(" ")
    .map((n) => n.slice(0, 1))
    .join("");

  return (
    <StyledAvatar imgSrc={imgSrc} size={size} variant={variant} {...props}>
      {variant === "initial" && name && initials?.slice(0, initialLength)}
    </StyledAvatar>
  );
};

export default Avatar;