"use client";
/*
 * Documentation:
 * Tooltip — https://app.subframe.com/f023064a5ca0/library?component=Tooltip_ccebd1e9-f6ac-4737-8376-0dfacd90c9f3
 */

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

export interface TooltipRootProps extends React.HTMLAttributes<HTMLDivElement> {
  children?: React.ReactNode;
  className?: string;
}

const TooltipRoot = React.forwardRef<HTMLDivElement, TooltipRootProps>(
  function TooltipRoot(
    { children, className, ...otherProps }: TooltipRootProps,
    ref
  ) {
    return (
      <div
        className={SubframeUtils.twClassNames(
          "flex max-w-[384px] flex-col items-start gap-2 rounded-sm bg-surface-feedback-solid-neutral-active px-1.5 py-0.5 shadow-lg",
          className
        )}
        ref={ref}
        {...otherProps}
      >
        {children ? (
          <span className="text-body-extra-small-medium-150 font-body-extra-small-medium-150 text-text-neutral-on-solid">
            {children}
          </span>
        ) : null}
      </div>
    );
  }
);

export const Tooltip = TooltipRoot;