"use client";
import clsx from "clsx";
import { FC, PropsWithChildren } from "react";
import styles from "./style.module.scss";

/**
 * @description 自定义button按钮
 * @param {any} children 插槽内容
 * @param {boolean} active 是否高亮
 * @param {() => void} callbackFun 回调方法
 */
export interface ButtonOwnProps {
    children?: any;
    active?: boolean;
    callbackFun?: () => void;
    [props: string]: any;
}

const ButtonOwn: FC<PropsWithChildren<ButtonOwnProps>> = ({
    children = "",
    active = false,
    callbackFun,
    ...other
}) => {
    const divClassName = clsx({
        [styles.button]: true,
        [styles.active]: active,
    });
    return (
        <button className={divClassName} {...other} onClick={callbackFun}>
            {children}
        </button>
    );
};

export default ButtonOwn;
