import { ButtonProps } from 'antd';
import { CSSProperties, ReactNode } from 'react';

type Props = {
  children: ReactNode;
  className?: string;
  style?: CSSProperties;
  title?: string; // 新增 title 属性，用于鼠标悬停显示提示
} & ButtonProps;
export default function IconButton({ children, className, style, onClick, title }: Props) {
  return (
    <button
      title={title}  // 将 title 传递给 button 元素
      //style={style}
      //style={{ ...style, border: 'none' }} // 保留移除边框的样式
      style={{ ...style, border: 'none', backgroundColor: 'transparent' }} // 明确设置默认背景色为透明
      className={`flex cursor-pointer items-center justify-center rounded-full p-2 hover:bg-hover ${className}`}
      onClick={onClick}
      onMouseEnter={(e) => (e.currentTarget.style.backgroundColor = 'rgba(0, 0, 0, 0.1)')} // 鼠标进入时设置灰色背景
      onMouseLeave={(e) => (e.currentTarget.style.backgroundColor = 'transparent')} // 鼠标离开时恢复透明背景
    >
      {children}
    </button>
  );
}
