import { jsxs, jsx } from 'react/jsx-runtime';
import { cn } from '../../../utils/cn.js';
import 'react';
import { messageTheme } from './Message.theme.js';

const MessageImage = ({ src, thumbnailUrl, name, size, alt, onClick, className, }) => {
    const imgSrc = thumbnailUrl || src;
    if (!imgSrc)
        return null;
    return (jsxs("div", { className: cn(messageTheme.imageStyle, className), children: [jsx("img", { src: imgSrc, alt: alt || name || "Image attachment", className: "w-full h-auto object-cover cursor-pointer", onClick: onClick, role: onClick ? "button" : undefined, tabIndex: onClick ? 0 : undefined }), (name || size) && (jsxs("div", { className: "flex items-center justify-between px-2 py-1.5 text-xs text-[var(--color-text-muted)]", children: [name && jsx("span", { className: "truncate", children: name }), size && jsx("span", { className: "flex-shrink-0", children: size })] }))] }));
};

export { MessageImage };
