import {
  AvatarBaseProps,
  AvatarIconProps,
  Avatar as DSAvatar,
  AvatarImageProps as DSAvatarImageProps,
} from "@opensea/ui-kit"
import React, {
  ComponentProps,
  ComponentPropsWithoutRef,
  ElementRef,
  forwardRef,
} from "react"
import { Image } from "../Image"

type BaseAvatarImageProps = DSAvatarImageProps &
  ComponentPropsWithoutRef<typeof Image>

export type AvatarProps =
  | Omit<BaseAvatarImageProps, "height" | "width">
  | AvatarIconProps
  | AvatarBaseProps

type AvatarImageProps = ComponentProps<NonNullable<AvatarProps["renderImage"]>>

export const AvatarImage = forwardRef<HTMLImageElement, AvatarImageProps>(
  function AvatarImage({ size, ...rest }, ref) {
    return <Image height={size} ref={ref} width={size} {...rest} />
  },
)

export const Avatar = forwardRef<ElementRef<typeof DSAvatar>, AvatarProps>(
  function NextAvatar(props, ref) {
    return <DSAvatar ref={ref} {...props} renderImage={AvatarImage} />
  },
)