"use client";

import cx from "classnames";
import React from "react";

import { Icon } from "../Icon";
import type { TooltipProps } from "./Tooltip";
import { Tooltip } from "./Tooltip";

const CLASS_ROOT = "info-tooltip";

type InfoTooltipProps = Omit<TooltipProps, "onAbort"> &
  Omit<React.HTMLAttributes<HTMLButtonElement>, "onAbort"> & {
    children?: React.ReactNode;
    className?: string;
  };

const InfoTooltip: React.FC<InfoTooltipProps> = ({
  children,
  className,
  ...other
}) => (
  <Tooltip
    dialog={children}
    renderTrigger={(props) => (
      <button type="button" className={CLASS_ROOT} {...props} />
    )}
    {...other}
  >
    <Icon name="assistance" className={cx(`${CLASS_ROOT}__icon`, className)} />
    <span className="sr-only">Info</span>
  </Tooltip>
);

InfoTooltip.displayName = "InfoTooltip";

export { InfoTooltip };