/**
 * V21 Tooltip 文字提示 / Popover 气泡卡片
 * 封装 Ant Design Tooltip 和 Popover，应用 V21 设计系统样式
 */
import React from "react";
import { Tooltip as AntTooltip, Popover as AntPopover } from "antd";
import classNames from "classnames";
import "./ui.css";

export type TooltipProps = React.ComponentProps<typeof AntTooltip> & {
  /** 使用 V21 样式 */
  v21?: boolean;
};

/** Tooltip 文字提示 */
const Tooltip: React.FC<TooltipProps> = ({
  overlayClassName,
  v21 = true,
  ...rest
}) => {
  const v21Class = classNames(v21 && "xx-tooltip", overlayClassName);
  return <AntTooltip overlayClassName={v21Class} {...rest} />;
};

export type PopoverProps = React.ComponentProps<typeof AntPopover> & {
  /** 使用 V21 样式 */
  v21?: boolean;
};

/** Popover 气泡卡片 */
const Popover: React.FC<PopoverProps> = ({
  overlayClassName,
  v21 = true,
  ...rest
}) => {
  const v21Class = classNames(v21 && "xx-popover", overlayClassName);
  return <AntPopover overlayClassName={v21Class} {...rest} />;
};

export { Tooltip, Popover };
export default Tooltip;
