import { jsxs, jsx } from 'react/jsx-runtime';
import { cn } from '../../../utils/cn.js';
import 'react';
import { messageTheme } from './Message.theme.js';
import { DocumentIcon, ArrowDownTrayIcon } from '@heroicons/react/24/outline';

const MessageFile = ({ name = "File", url, size, onClick, className, }) => {
    const content = (jsxs("div", { className: cn(messageTheme.fileStyle, className), onClick: !url ? onClick : undefined, role: !url && onClick ? "button" : undefined, tabIndex: !url && onClick ? 0 : undefined, children: [jsx(DocumentIcon, { className: "size-5 flex-shrink-0 text-[var(--color-text-muted)]" }), jsxs("div", { className: "flex flex-col min-w-0 flex-1", children: [jsx("span", { className: "font-medium text-[var(--color-text-primary)] truncate", children: name }), size && (jsx("span", { className: "text-xs text-[var(--color-text-muted)]", children: size }))] }), url && (jsx(ArrowDownTrayIcon, { className: "size-4 flex-shrink-0 text-[var(--color-text-muted)]" }))] }));
    if (url) {
        return (jsx("a", { href: url, download: true, className: "no-underline", "aria-label": `Download ${name}`, children: content }));
    }
    return content;
};

export { MessageFile };
