"use client";
/*
 * Documentation:
 * Avatar — https://app.subframe.com/f023064a5ca0/library?component=Avatar_bec25ae6-5010-4485-b46b-cf79e3943ab2
 */

import React from "react";
import * as SubframeUtils from "../../utils";

export interface AvatarRootProps
  extends Omit<React.HTMLAttributes<HTMLDivElement>, "color"> {
  color?: "neutral" | "blue" | "green" | "red" | "yellow" | "purple";
  size?:
    | "extra-small"
    | "small"
    | "medium"
    | "large"
    | "extra-large"
    | "2-x-large"
    | "3-x-large";
  border?: boolean;
  children?: React.ReactNode;
  image?: string;
  className?: string;
}

const AvatarRoot = React.forwardRef<HTMLDivElement, AvatarRootProps>(
  function AvatarRoot(
    {
      color = "neutral",
      size = "medium",
      border = false,
      children,
      image,
      className,
      ...otherProps
    }: AvatarRootProps,
    ref
  ) {
    return (
      <div
        className={SubframeUtils.twClassNames(
          "group/bec25ae6 flex h-10 w-10 flex-col items-center justify-center gap-2 overflow-hidden rounded-round bg-surface-neutral-tertiary relative",
          {
            "border border-solid border-border-on-primary": border,
            "h-32 w-32": size === "3-x-large",
            "h-20 w-20": size === "2-x-large",
            "h-16 w-16": size === "extra-large",
            "h-12 w-12": size === "large",
            "h-8 w-8": size === "small",
            "h-6 w-6": size === "extra-small",
            "bg-surface-ui-subtle-purple-default": color === "purple",
            "bg-surface-ui-subtle-yellow-default": color === "yellow",
            "bg-surface-ui-subtle-red-default": color === "red",
            "bg-surface-ui-subtle-green-default": color === "green",
            "bg-surface-ui-subtle-blue-default": color === "blue",
          },
          className
        )}
        ref={ref}
        {...otherProps}
      >
        {children ? (
          <span
            className={SubframeUtils.twClassNames(
              "line-clamp-1 w-full text-body-default-medium-150 font-body-default-medium-150 text-text-neutral-secondary text-center absolute",
              {
                "text-title-hero font-title-hero": size === "3-x-large",
                "text-title-page font-title-page": size === "2-x-large",
                "text-subtitle font-subtitle": size === "extra-large",
                "text-heading-0 font-heading-0": size === "large",
                "text-body-small-medium-150 font-body-small-medium-150":
                  size === "small",
                "text-body-extra-small-medium-150 font-body-extra-small-medium-150":
                  size === "extra-small",
                "text-text-ui-purple": color === "purple",
                "text-text-ui-yellow": color === "yellow",
                "text-text-ui-red": color === "red",
                "text-text-ui-green": color === "green",
                "text-text-ui-blue": color === "blue",
              }
            )}
          >
            {children}
          </span>
        ) : null}
        {image ? (
          <img
            className={SubframeUtils.twClassNames(
              "h-10 w-10 flex-none object-cover absolute",
              {
                "h-24 w-24": size === "3-x-large",
                "h-20 w-20": size === "2-x-large",
                "h-16 w-16": size === "extra-large",
                "h-12 w-12": size === "large",
                "h-8 w-8": size === "small",
                "h-6 w-6": size === "extra-small",
              }
            )}
            src={image}
          />
        ) : null}
      </div>
    );
  }
);

export const Avatar = AvatarRoot;