import React from "react";
import './button.css';
import Iconsvg from '../../Ui/Icon/Icon'

type Props = {
    id: string,
    name: string,
    buttonLabel?: string,
    labelShow?: boolean,
    iconShow?: boolean,
    iconName?: any,
    iconPostions?: 'left' | 'right',
    buttonType: 'button' | 'submit',
    outlined?: boolean,
    disable?: boolean,
    size?: 'default' | 'small' | 'medium' | 'large',
    variant?: 'default' |'primary' | 'secondary',
    fullWidth?: boolean,
    rounded?: boolean,
    handleClick: () => void;
}

const Button = (props:Props) => {
    const {buttonLabel, labelShow, iconShow, iconName, iconPostions, buttonType, outlined, disable, size, variant, fullWidth, rounded, handleClick } = props;
    const IconLeft = iconPostions === 'left' ? <Iconsvg addClass={`${size ? `btn-icon-${size}` : ''}`} name={iconName}/> : ''
    const IconRight = iconPostions === 'right' ? <Iconsvg name={iconName}/> : ''
    return (
        <>
            <button disabled={disable} className={`btn ${outlined ? 'btn-outline' : 'btn-fill'} ${rounded ? 'btn-rounded' : ''} ${fullWidth ? 'btn-fullwidth' : ''} ${size ? `btn-size-${size}` : ''} ${variant ? `btn-bg-${variant}` : ''}`} type={buttonType} onClick={handleClick}>
                {iconShow && iconName && IconLeft} {labelShow && buttonLabel && buttonLabel} {iconShow && iconName && IconRight}
            </button>
        </>
    );
};

export default Button;