import { jsxs, jsx } from 'react/jsx-runtime';
import React__default from 'react';
import { cn } from '../../../utils/cn.js';
import { useSidebarContext } from './SidebarContext.js';
import { Avatar } from '../Avatar/Avatar.js';
import { Tooltip } from '../Tooltip/Tooltip.js';
import '../Tooltip/Tooltip.animations.js';

const statusColors = {
    online: "bg-[var(--color-success)]",
    offline: "bg-[var(--color-background-quaternary)]",
    away: "bg-[var(--color-warning)]",
    busy: "bg-[var(--color-danger)]",
};
const SidebarUserProfile = React__default.forwardRef(({ name, email, avatar, status, dropdownContent, className, onClick, ...props }, ref) => {
    const sidebarContext = useSidebarContext();
    const collapsed = (sidebarContext === null || sidebarContext === void 0 ? void 0 : sidebarContext.collapsed) || false;
    const isMobile = (sidebarContext === null || sidebarContext === void 0 ? void 0 : sidebarContext.isMobile) || false;
    const isCollapsedView = collapsed && !isMobile;
    const avatarElement = (jsxs("div", { className: "relative flex-shrink-0", children: [jsx(Avatar, { src: avatar, name: name, size: "sm" }), status && (jsx("span", { className: cn("absolute -bottom-0.5 -right-0.5 size-3 rounded-full ring-2 ring-[var(--color-background)]", statusColors[status]), "aria-label": `Status: ${status}` }))] }));
    const content = (jsxs("div", { ref: ref, className: cn("flex items-center gap-3 rounded-[var(--radius-base)] cursor-pointer transition-colors duration-150 hover:bg-[var(--color-background-secondary)]", isCollapsedView ? "justify-center p-2" : "px-3 py-2", className), role: "button", tabIndex: 0, onClick: onClick, onKeyDown: (e) => {
            if ((e.key === "Enter" || e.key === " ") && onClick) {
                e.preventDefault();
                e.currentTarget.click();
            }
        }, ...props, children: [avatarElement, !isCollapsedView && (jsxs("div", { className: "flex-1 min-w-0", children: [jsx("div", { className: "text-sm font-medium text-[var(--color-text-primary)] truncate", children: name }), email && (jsx("div", { className: "text-xs text-[var(--color-text-muted)] truncate", children: email }))] }))] }));
    // Tooltip when collapsed
    if (isCollapsedView) {
        return (jsx(Tooltip, { content: name, placement: "right", children: content }));
    }
    return content;
});
SidebarUserProfile.displayName = "SidebarUserProfile";

export { SidebarUserProfile };
