import React from "react"
import tw, {styled} from "twin.macro"
import "styled-components/macro"
import { colors, colorsDisabled, colorsHover } from "./Colors"



const BtnBase = styled.button(({ type }) => [
  tw`bg-secondary hover:bg-trinary disabled:bg-trinary m-2 outline-none focus:outline-none text-primary font-bold ease-linear transition-all duration-150`,
  colors[type], colorsHover[type], colorsDisabled[type]
])

/*
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:
            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>
    )
}
*/

const ButtonBig = tw(BtnBase)`px-6 py-4 rounded-2xl`
const ButtonBigAnim = tw(ButtonBig)`transition duration-500 ease-in-out transform hover:scale-110`

const Button = tw(BtnBase)`px-4 py-2 rounded-xl`
const ButtonSmall = tw(BtnBase)`px-3 py-1 rounded`
const ButtonRound = tw(BtnBase)`p-2 rounded-full`
const IconButton = tw(BtnBase)`p-2 rounded-full`

export { ButtonBig, ButtonBigAnim, ButtonSmall, ButtonRound, IconButton }
export default Button;

/*
export function ButtonBig(props) {
    return (
        <ButtonBase {...props} className={"px-6 py-4 rounded-2xl " + (props.className ?? "")}>
            {props.children}
        </ButtonBase>
    )
}
export function ButtonBigAnim(props) {
    return (
        <ButtonBase {...props} className={"px-6 py-4 rounded-2xl transition duration-500 ease-in-out transform hover:scale-110 " + (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>
    )
}
*/