'use client';
import { jsxDEV as _jsxDEV } from "react/jsx-dev-runtime";
import React, { useState } from 'react';
import { LockIcon } from '../../icons/Lock/index.js';
import { useTranslation } from '../../providers/Translation/index.js';
import { isClientUserObject } from '../../utilities/isClientUserObject.js';
import { Tooltip } from '../Tooltip/index.js';
import './index.scss';
const baseClass = 'locked';
export const Locked = ({ className, user })=>{
    const [hovered, setHovered] = useState(false);
    const { t } = useTranslation();
    const userToUse = isClientUserObject(user) ? user.email ?? user.id : t('general:anotherUser');
    return /*#__PURE__*/ _jsxDEV("div", {
        className: [
            baseClass,
            className
        ].filter(Boolean).join(' '),
        onMouseEnter: ()=>setHovered(true),
        onMouseLeave: ()=>setHovered(false),
        role: "button",
        tabIndex: 0,
        children: [
            /*#__PURE__*/ _jsxDEV(Tooltip, {
                alignCaret: "left",
                className: `${baseClass}__tooltip`,
                position: "top",
                show: hovered,
                children: `${userToUse} ${t('general:isEditing')}`
            }, void 0, false, {
                fileName: "src/elements/Locked/index.tsx",
                lineNumber: 31,
                columnNumber: 7
            }, this),
            /*#__PURE__*/ _jsxDEV(LockIcon, {}, void 0, false, {
                fileName: "src/elements/Locked/index.tsx",
                lineNumber: 37,
                columnNumber: 7
            }, this)
        ]
    }, void 0, true, {
        fileName: "src/elements/Locked/index.tsx",
        lineNumber: 24,
        columnNumber: 5
    }, this);
};

//# sourceMappingURL=index.js.map