import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { ChevronDown, ChevronRight, AlertCircle } from 'lucide-react';
const colorClasses = {
    default: {
        normal: 'text-muted-foreground',
        hover: 'hover:text-foreground',
        error: 'text-red-700 dark:text-red-300',
        errorHover: 'hover:text-red-600 dark:hover:text-red-200',
    },
    blue: {
        normal: 'text-blue-700 dark:text-blue-300',
        hover: 'hover:text-blue-600 dark:hover:text-blue-200',
        error: 'text-red-700 dark:text-red-300',
        errorHover: 'hover:text-red-600 dark:hover:text-red-200',
    },
    emerald: {
        normal: 'text-emerald-700 dark:text-emerald-300',
        hover: 'hover:text-emerald-600 dark:hover:text-emerald-200',
        error: 'text-red-700 dark:text-red-300',
        errorHover: 'hover:text-red-600 dark:hover:text-red-200',
    },
    purple: {
        normal: 'text-purple-700 dark:text-purple-300',
        hover: 'hover:text-purple-600 dark:hover:text-purple-200',
        error: 'text-red-700 dark:text-red-300',
        errorHover: 'hover:text-red-600 dark:hover:text-red-200',
    },
    cyan: {
        normal: 'text-cyan-700 dark:text-cyan-300',
        hover: 'hover:text-cyan-600 dark:hover:text-cyan-200',
        error: 'text-red-700 dark:text-red-300',
        errorHover: 'hover:text-red-600 dark:hover:text-red-200',
    },
    amber: {
        normal: 'text-amber-700 dark:text-amber-300',
        hover: 'hover:text-amber-600 dark:hover:text-amber-200',
        error: 'text-red-700 dark:text-red-300',
        errorHover: 'hover:text-red-600 dark:hover:text-red-200',
    },
    red: {
        normal: 'text-red-700 dark:text-red-300',
        hover: 'hover:text-red-600 dark:hover:text-red-200',
        error: 'text-red-700 dark:text-red-300',
        errorHover: 'hover:text-red-600 dark:hover:text-red-200',
    },
};
export function ToolHeader({ toolName, isExpanded, onToggle, isError = false, colorVariant = 'default', canExpand = true, children, }) {
    const colors = colorClasses[colorVariant];
    const colorClass = isError
        ? `${colors.error} ${colors.errorHover}`
        : `${colors.normal} ${colors.hover}`;
    return (_jsxs("button", { type: "button", onClick: () => canExpand && onToggle(), className: `flex items-center gap-2 transition-colors w-full min-w-0 ${colorClass}`, children: [canExpand ? (isExpanded ? (_jsx(ChevronDown, { className: "h-3 w-3 flex-shrink-0" })) : (_jsx(ChevronRight, { className: "h-3 w-3 flex-shrink-0" }))) : (_jsx("div", { className: "w-3 flex-shrink-0" })), isError && (_jsx(AlertCircle, { className: "h-3 w-3 flex-shrink-0 text-red-600 dark:text-red-400" })), _jsxs("span", { className: "font-medium flex-shrink-0", children: [toolName, isError ? ' error' : ''] }), children] }));
}
export function ToolHeaderSeparator() {
    return _jsx("span", { className: "text-muted-foreground/70 flex-shrink-0", children: "\u00B7" });
}
export function ToolHeaderDetail({ children, className = '', }) {
    return _jsx("span", { className: `text-foreground/70 ${className}`, children: children });
}
export function ToolHeaderMeta({ children, className = '', }) {
    return (_jsx("span", { className: `text-muted-foreground/80 flex-shrink-0 whitespace-nowrap ${className}`, children: children }));
}
export function ToolHeaderSuccess({ children }) {
    return (_jsx("span", { className: "text-emerald-600 dark:text-emerald-400 flex-shrink-0", children: children }));
}
export function ToolHeaderError({ children }) {
    return (_jsx("span", { className: "text-red-600 dark:text-red-400 flex-shrink-0", children: children }));
}
//# sourceMappingURL=ToolHeader.js.map