"use client"
import React, { forwardRef } from "react"
import { classNames, VariantProps } from "../../utils"
import { CenterAligned, CenterAlignedProps } from "../CenterAligned"
import { AvatarBadgeSize, avatarBadgeVariants } from "./avatar-badge"

export type AvatarBadgeProps = CenterAlignedProps &
  Omit<VariantProps<typeof avatarBadgeVariants>, "tint"> & {
    tintSrc?: string
  }

export const AVATAR_BADGE_DEFAULT_SIZE: AvatarBadgeSize = "md"

const badgeTintClassNames = classNames("absolute inset-0")

export const AvatarBadge = forwardRef<HTMLDivElement, AvatarBadgeProps>(
  function AvatarBadge(
    { children, className, size = AVATAR_BADGE_DEFAULT_SIZE, tintSrc, ...rest },
    ref,
  ) {
    return (
      <CenterAligned
        className={classNames(
          avatarBadgeVariants({ size, tint: Boolean(tintSrc) }),
          className,
        )}
        ref={ref}
        {...rest}
      >
        {children}
        {tintSrc && (
          <div
            className={classNames(
              badgeTintClassNames,
              "-z-10 overflow-hidden backdrop-blur-0",
            )}
          >
            <img className={badgeTintClassNames} src={tintSrc} />
            <div
              className={classNames(badgeTintClassNames, "bg-additional-3/60")}
            />
            <div className={classNames(badgeTintClassNames, "backdrop-blur")} />
          </div>
        )}
      </CenterAligned>
    )
  },
)