"use client";
/*
 * Documentation:
 * Avatar Group — https://app.subframe.com/f023064a5ca0/library?component=Avatar+Group_6e7444ab-1d67-47f5-af23-1a2d3ecf1016
 */

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

export interface AvatarOverflowProps
  extends React.HTMLAttributes<HTMLDivElement> {
  border?: boolean;
  overflowLabel?: React.ReactNode;
  className?: string;
}

const AvatarOverflow = React.forwardRef<HTMLDivElement, AvatarOverflowProps>(
  function AvatarOverflow(
    {
      border = false,
      overflowLabel,
      className,
      ...otherProps
    }: AvatarOverflowProps,
    ref
  ) {
    return (
      <div
        className={SubframeUtils.twClassNames(
          "group/dbd63208 flex h-10 w-10 cursor-pointer items-center justify-center overflow-hidden rounded-round bg-surface-neutral-tertiary group/avataroverflow shrink-0 relative",
          { "border border-solid border-border-on-primary": border },
          className
        )}
        ref={ref}
        {...otherProps}
      >
        {overflowLabel ? (
          <span className="text-body-small-medium-150 font-body-small-medium-150 text-text-neutral-secondary">
            {overflowLabel}
          </span>
        ) : null}
      </div>
    );
  }
);

export interface AvatarGroupRootProps
  extends React.HTMLAttributes<HTMLDivElement> {
  hoverEffect?: "on" | "off";
  border?: boolean;
  showOverflow?: boolean;
  children?: React.ReactNode;
  overflowLabel?: React.ReactNode;
  className?: string;
}

const AvatarGroupRoot = React.forwardRef<HTMLDivElement, AvatarGroupRootProps>(
  function AvatarGroupRoot(
    {
      hoverEffect = "off",
      border = false,
      showOverflow = false,
      children,
      overflowLabel,
      className,
      ...otherProps
    }: AvatarGroupRootProps,
    ref
  ) {
    return (
      <div
        className={SubframeUtils.twClassNames(
          "group/6e7444ab items-center group/mtavatargroup inline-flex [&>*:not(:first-child)]:-ml-2",
          className
        )}
        ref={ref}
        {...otherProps}
      >
        {children ? (
          <div
            className={SubframeUtils.twClassNames(
              "items-center inline-flex [&>*:not(:first-child)]:-ml-2 [&>*]:relative relative [&>*]:z-0 z-0 [&>*:nth-child(1)]:z-[1] [&>*:nth-child(2)]:z-[2] [&>*:nth-child(3)]:z-[3] [&>*:nth-child(4)]:z-[4] [&>*:nth-child(5)]:z-[5]",
              {
                "[&>*]:border [&>*]:border-solid [&>*]:border-border-on-primary":
                  border,
                "[&>*]:transition-transform [&>*]:duration-200 [&>*:hover]:scale-110 [&>*:hover]:rotate-6 [&>*:hover]:z-20":
                  hoverEffect === "on",
              }
            )}
          >
            {children}
          </div>
        ) : null}
        <AvatarOverflow
          className={SubframeUtils.twClassNames("hidden relative z-10", {
            flex: showOverflow,
            "border border-solid border-border-on-primary": border,
            "transition-transform duration-200 hover:scale-110 hover:rotate-6":
              hoverEffect === "on",
          })}
          overflowLabel={overflowLabel}
        />
      </div>
    );
  }
);

export const AvatarGroup = Object.assign(AvatarGroupRoot, {
  AvatarOverflow,
});