import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { Icon } from "@powerhousedao/design-system";
import { twMerge } from "tailwind-merge";
import { ConnectTooltip } from "../../tooltip/tooltip.js";
export function Errors(props) {
    const { errors } = props;
    const hasErrors = !!errors?.length;
    const color = hasErrors ? "text-red-800" : "text-green-700";
    const icon = hasErrors ? (_jsx(Icon, { name: "Exclamation", size: 16 })) : (_jsx(Icon, { name: "Check", size: 16 }));
    const text = hasErrors ? `Error: ${errors[0]}` : "No errors";
    const content = (_jsxs("span", { className: twMerge("flex w-fit items-center rounded-lg border border-gray-200 px-2 py-1 text-xs", color, hasErrors && "cursor-pointer"), children: [icon, _jsx("span", { className: twMerge("inline-block max-w-36 truncate"), children: text })] }));
    const tooltipContent = errors?.map((message, index) => (_jsxs("p", { className: "text-red-800", children: ["Error: ", message] }, index)));
    if (hasErrors)
        return _jsx(ConnectTooltip, { content: tooltipContent, children: content });
    return content;
}
//# sourceMappingURL=errors.js.map