import React from 'react'
import { Link } from 'react-router-dom'

function Button({ warn, link, text, icon, onClick, type, children, active, alt, disabled, className: classToUse, upper, target, rel }: { warn?: boolean, upper?: boolean, className?: string, text?: string, icon?: string, type?: "submit" | "reset" | "button", link?: string, onClick?: (e: any) => void, children?: React.ReactNode, active?: boolean, alt?: boolean, disabled?: boolean, target?: string, rel?: string }) {
    const className = `${classToUse || ''} ${warn ? 'warn' : ''} ${active ? 'active' : ''} ${alt ? 'alt' : ''} ${disabled ? 'disabled' : ''} flex gap-2`
    const button = <button disabled={disabled} type={type} className={className} onClick={onClick}>
        {children || ((text || icon) && <>
            {text && <span>{!upper ? text : text.toUpperCase()}</span>}
            {icon && <span><i className={icon} /></span>}
        </>)}
    </button>
    if (link) {
        return <Link to={link} rel={rel} target={target} className={(className.includes('w-full') || className.includes('w100')) ? 'w-full max-w-full' : ''}>{button}</Link>
    }
    return button
}

export default Button