import React from 'react'

function ButtonBase(props) {
    let color = "bg-secondary hover:bg-trinary"
    switch (props.type) {
        case "warning":
            color = "bg-accent4 hover:bg-accent4-dark"
            break;
        case "danger":
            color = "bg-red-700 hover:bg-red-800"
            break;
        case "accent":
            color = "bg-accent hover:bg-accent-dark"
            break;
        case "accent2":
            color = "bg-accent2 hover:bg-accent2-dark"
            break;
        case "accent3":
            color = "bg-accent3 hover:bg-accent3-dark"
            break;
        case "accent5":
            color = "bg-accent5 hover:bg-accent5-dark"
            break;
        default:
            color = ""
            break;
    }
    return (
        <button {...props}
            className={color + " m-2 outline-none focus:outline-none text-primary font-bold ease-linear transition-all duration-150 " + (props.className ?? "")}
            type="button"
        >
            {props.children}
        </button>
    )
}

export function ButtonBig(props) {
    return (
        <ButtonBase {...props} className={"px-6 py-4 rounded-2xl " + (props.className ?? "")}>
            {props.children}
        </ButtonBase>
    )
}
export default function Button(props) {
    return (
        <ButtonBase {...props} className={"px-4 py-2 rounded-xl " + (props.className ?? "")}>
            {props.children}
        </ButtonBase>
    )
}
export function ButtonSmall(props) {
    return (
        <ButtonBase {...props} className={"px-3 py-1 rounded " + (props.className ?? "")}>
            {props.children}
        </ButtonBase>
    )
}
export function ButtonRound(props) {
    return (
        <ButtonBase {...props} className={"p-2 rounded-full " + (props.className ?? "")}>
            {props.children}
        </ButtonBase>
    )
}
export function IconButton({icon,...props}){
    return(
        <a {...props} className={"cursor-pointer hover:text-primary text-secondary py-1 px-3 " + (props.className ?? "")}>
            <i className={"fi fi-"+icon}></i>
        </a>
    )
}