var __assign = (this && this.__assign) || function () {
    __assign = Object.assign || function(t) {
        for (var s, i = 1, n = arguments.length; i < n; i++) {
            s = arguments[i];
            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
                t[p] = s[p];
        }
        return t;
    };
    return __assign.apply(this, arguments);
};
var __read = (this && this.__read) || function (o, n) {
    var m = typeof Symbol === "function" && o[Symbol.iterator];
    if (!m) return o;
    var i = m.call(o), r, ar = [], e;
    try {
        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
    }
    catch (error) { e = { error: error }; }
    finally {
        try {
            if (r && !r.done && (m = i["return"])) m.call(i);
        }
        finally { if (e) throw e.error; }
    }
    return ar;
};
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useState } from 'react';
import { ButtonStyleTypes } from 'src/lib/types/types';
import css from './Button.module.scss';
import { _cx } from 'src/utility/class';
var cx = _cx(css);
export default function Button(_a) {
    var id = _a.id, children = _a.children, onClick = _a.onClick, type = _a.type, _b = _a.styleType, styleType = _b === void 0 ? ButtonStyleTypes.NORMAL : _b, width = _a.width, padding = _a.padding, margin = _a.margin, fontSize = _a.fontSize, textWeight = _a.textWeight, letterSpacing = _a.letterSpacing, plusBg = _a.plusBg, minusBg = _a.minusBg, isCircleSmall = _a.isCircleSmall, disabled = _a.disabled, dataTeliumEvent = _a.dataTeliumEvent, bgColor = _a.bgColor, buttonStyle = _a.buttonStyle, icon = _a.icon;
    var _c = __read(useState(false), 2), hovered = _c[0], setHovered = _c[1];
    return (_jsxs("button", { className: cx('styled-button', {
            plusBg: plusBg,
            minusBg: minusBg,
            isCircleSmall: isCircleSmall,
            disabled: disabled,
            isNormal: styleType === 'normal',
            isFinder: styleType === 'finder',
            isInput: styleType === 'input',
            isCircle: styleType === 'circle',
            isPrimary: styleType === 'primary',
            isSecondry: styleType === 'secondry',
            isCancel: styleType === 'cancel',
            isFixed: styleType === 'fixed',
            isIcon: styleType === 'icon',
            isSmall: styleType === 'small',
            backButton: styleType === 'backButton',
            secondryWithIcon: styleType === 'secondryWithIcon',
            isSmallWithIcon: styleType === 'smallWithIcon',
        }), style: __assign({ width: width ? width : 'fit-content', padding: padding, margin: margin, fontSize: fontSize, fontWeight: textWeight, letterSpacing: letterSpacing, backgroundColor: bgColor }, buttonStyle), id: id, onClick: onClick, type: type, "data-telium-event": dataTeliumEvent, onMouseEnter: function () { return setHovered(true); }, onMouseLeave: function () { return setHovered(false); }, onTouchStart: function () { return setHovered(true); }, onTouchEnd: function () { return setHovered(false); }, children: [icon && (_jsx("span", { className: cx('icon'), children: hovered && Array.isArray(icon) ? icon[1] : Array.isArray(icon) ? icon[0] : icon })), children] }));
}
