type ButtonProps = {
    onClick?: (event: React.MouseEvent<HTMLButtonElement | HTMLAnchorElement>) => void;
    as?: 'a' | 'button'; // 要渲染成什麼元素
    disabled?: boolean;
    type?: string;
    buttonType?: 'submit' | 'reset' | 'button' | undefined;
    label?: string;
    iconButton?: boolean;
    icon?: string;
    href?: string; // 如果是 'a' 元素，則需要 href
};

export default function Button({
    onClick,
    as = 'button',
    type = '',
    buttonType = undefined,
    label = 'Button',
    iconButton = false,
    icon = 'arrowRight',
    href = '#',
}: ButtonProps) {
    const buttonInner = iconButton ? <i className={icon}></i> : <span className="button-text">{label}</span>;
    if (as === 'a') {
        return (
            <a href={href} className={`button ${type}`}>
                {buttonInner}
            </a>
        );
    } else {
        return (
            <button type={buttonType} className={`button ${type}`} onClick={onClick}>
                {buttonInner}
            </button>
        );
    }
}