"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.default = NotiBellButton;
const tslib_1 = require("tslib");
const react_1 = require("@headlessui/react");
const outline_1 = require("@heroicons/react/24/outline");
const react_2 = tslib_1.__importDefault(require("react"));
function NotiBellButton({ onClick, unreadCount }) {
    return (react_2.default.createElement(react_1.Menu.Button, { className: `
        group inline-flex h-7 ${unreadCount > 0 ? 'w-12' : 'w-7'}
        cursor-pointer items-center justify-center gap-0.5 rounded-lg
        transition-all duration-150 ease-out
        hover:border-gray-300 hover:bg-white
        active:border-b-gray-300 active:bg-gray-200
        active:shadow-[0rem_0.125rem_0.1rem_0rem_#0004_inset]
      `, onClick: onClick, type: 'button' },
        react_2.default.createElement("div", { className: 'flex items-center gap-0.5 transition-transform duration-150 ease-[cubic-bezier(0.22,1,0.36,1)] group-active:translate-y-[1px]' },
            react_2.default.createElement(outline_1.BellIcon, { className: 'h-[19px] w-[22px] text-gray-600' }),
            unreadCount > 0 && (react_2.default.createElement("span", { className: 'shadow-sm min-w-4 rounded-md bg-red-500 p-1 text-center text-[10px] font-semibold leading-none text-white' }, unreadCount > 9 ? '9+' : unreadCount)))));
}
//# sourceMappingURL=NotiBellButton.js.map