import React from "react";
const SimpleLogViewer = (props) => {
    const showLineNumbers = props.showLineNumbers !== false;
    const height = props.height || "400px";
    const title = props.title;
    const renderContent = () => {
        if (typeof props.children === "string") {
            const lines = props.children.split("\n");
            return (React.createElement(React.Fragment, null, lines.map((line, index) => {
                return (React.createElement("div", { key: index, className: "flex hover:bg-slate-800/50 transition-colors" },
                    showLineNumbers && (React.createElement("span", { className: "select-none text-slate-600 text-right pr-4 w-12 flex-shrink-0 border-r border-slate-800 mr-4" }, index + 1)),
                    React.createElement("span", { className: "text-slate-300 whitespace-pre-wrap break-all flex-1" }, line || " ")));
            })));
        }
        if (Array.isArray(props.children)) {
            return (React.createElement(React.Fragment, null, props.children.map((child, index) => {
                return (React.createElement("div", { key: index, className: "flex hover:bg-slate-800/50 transition-colors" },
                    showLineNumbers && (React.createElement("span", { className: "select-none text-slate-600 text-right pr-4 w-12 flex-shrink-0 border-r border-slate-800 mr-4" }, index + 1)),
                    React.createElement("span", { className: "text-slate-300 whitespace-pre-wrap break-all flex-1" }, child)));
            })));
        }
        return (React.createElement("div", { className: "text-slate-300 whitespace-pre-wrap break-all" }, props.children));
    };
    const scrollbarStyles = {
        maxHeight: height,
        scrollbarWidth: "thin",
        scrollbarColor: "#475569 #1e293b",
    };
    return (React.createElement("div", { className: "rounded-lg overflow-hidden border border-slate-700 bg-slate-900 shadow-lg" },
        title && (React.createElement("div", { className: "px-4 py-3 border-b border-slate-700 bg-slate-800" },
            React.createElement("h3", { className: "text-sm font-medium text-slate-200" }, title))),
        React.createElement("div", { className: "overflow-auto font-mono text-sm leading-6 p-4 [&::-webkit-scrollbar]:w-2 [&::-webkit-scrollbar-track]:bg-slate-800 [&::-webkit-scrollbar-thumb]:bg-slate-600 [&::-webkit-scrollbar-thumb]:rounded-full [&::-webkit-scrollbar-thumb]:hover:bg-slate-500", style: scrollbarStyles }, renderContent())));
};
export default SimpleLogViewer;
//# sourceMappingURL=SimpleLogViewer.js.map