import React from "react";

import { GatsbyImage as Img, type IGatsbyImageData } from "gatsby-plugin-image";

import { Avatar as ChakraAvatar } from "./ChakraAvatar";

export const Avatar = ({
  image,
  alt,
  title,
  loading = "lazy",
  ...props
}: {
  image?: Partial<IGatsbyImageData>;
  alt?: string;
  title?: string;
  loading?: "eager" | "lazy";
  style?: React.CSSProperties;
} & React.ComponentProps<typeof ChakraAvatar>): JSX.Element => {
  const {
    height = "50px",
    width = "50px",
    borderRadius = "50%",
    style,
  } = props;

  if (!image) {
    return (
      <ChakraAvatar
        name={alt}
        {...props}
        height={height}
        width={width}
        style={{
          width,
          height,
          ...style,
        }}
      />
    );
  }

  return (
    <Img
      style={{
        borderRadius: borderRadius as string,
        width: width as string,
        height: height as string,
        ...style,
      }}
      imgStyle={{
        transition: "unset", // This smooths out loading after blur is finished
        borderRadius: borderRadius as string,
      }}
      image={image as IGatsbyImageData}
      alt={alt as string}
      title={title}
      loading={loading}
    />
  );
};