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

const MessageLink = ({ url, thumbnailUrl, title, description, domain, className, }) => {
    const content = (jsxs("div", { className: cn(messageTheme.linkStyle, className), children: [thumbnailUrl && (jsx("img", { src: thumbnailUrl, alt: title || "Link preview", className: "w-full h-32 object-cover" })), jsxs("div", { className: "px-3 py-2.5 flex flex-col gap-0.5", children: [title && (jsx("span", { className: "font-medium text-[var(--color-text-primary)] line-clamp-1", children: title })), description && (jsx("span", { className: "text-[var(--color-text-muted)] line-clamp-2", children: description })), domain && (jsxs("span", { className: "flex items-center gap-1 text-xs text-[var(--color-text-placeholder)] mt-0.5", children: [jsx(LinkIcon, { className: "size-3" }), domain] }))] })] }));
    if (url) {
        return (jsx("a", { href: url, target: "_blank", rel: "noopener noreferrer", className: "no-underline", "aria-label": title ? `Open ${title}` : "Open link", children: content }));
    }
    return content;
};

export { MessageLink };
