import { jsx as _jsx } from "react/jsx-runtime";
import { opacify } from 'polished';
import { cn } from '../../../cn';
import { RED, UNDERLAY_RED } from './colors';
export const Button = (props) => {
    var _a, _b, _c;
    const { children, loading, hoverColor, fullWidth, color, size, className, ...other } = props;
    const actualDisabled = other.disabled || loading;
    return (_jsx("button", { type: "button", className: cn('text-base rounded-lg font-bold appearance-none border-2 border-solid border-black border-b-4 font-sans flex flex-row items-center justify-center ', className), disabled: actualDisabled, ...other, style: {
            ...((_a = props.style) !== null && _a !== void 0 ? _a : {}),
            padding: (_c = (_b = props.style) === null || _b === void 0 ? void 0 : _b.padding) !== null && _c !== void 0 ? _c : (props.size === 'sm' ? '10px 16px' : '16px 22px'),
            color: props.color,
            cursor: props.disabled ? 'default' : 'pointer',
            backgroundColor: props.background,
            opacity: props.disabled ? 0.7 : 1,
            ...(fullWidth ? { width: '100%' } : {}),
        }, children: children }));
};
export const BlueButton = (props) => {
    return _jsx(Button, { ...props, background: "var(--blue-underlay)", color: "white" });
};
export const PlainButton = (props) => {
    return (_jsx(Button, { ...props, background: "var(--plain-button)", color: "var(--text-color)" }));
};
export const RedButton = (props) => {
    return (_jsx(Button, { ...props, background: UNDERLAY_RED, hoverColor: opacify(0.1, UNDERLAY_RED), color: RED }));
};
export const ClearButton = (props) => {
    return (_jsx(Button, { ...props, background: "transparent", color: "var(--text-color)", hoverColor: "var(--clear-hover)" }));
};
