'use client';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { CodeViewer } from '../../playground/code-editor';
export function ResponsesSection({ responses }) {
    const responseEntries = Object.entries(responses);
    if (responseEntries.length === 0) {
        return null;
    }
    return /*#__PURE__*/ _jsxs("section", {
        children: [
            /*#__PURE__*/ _jsx("h2", {
                className: "text-2xl font-semibold mb-4",
                children: "Responses"
            }),
            /*#__PURE__*/ _jsx("div", {
                className: "space-y-4",
                children: responseEntries.map(([name, response])=>{
                    // Pass raw JSON - CodeViewer will format it
                    const bodyContent = response.body ? typeof response.body === 'string' ? response.body : JSON.stringify(response.body) : null;
                    return /*#__PURE__*/ _jsxs("div", {
                        className: "border rounded-sm overflow-hidden",
                        children: [
                            /*#__PURE__*/ _jsx("div", {
                                className: "bg-muted/50 px-4 py-3 border-b",
                                children: /*#__PURE__*/ _jsxs("div", {
                                    className: "flex items-center gap-3",
                                    children: [
                                        /*#__PURE__*/ _jsx("span", {
                                            className: `px-2 py-1 rounded text-xs font-semibold ${response.code >= 200 && response.code < 300 ? 'bg-green-500 text-white' : response.code >= 400 ? 'bg-red-500 text-white' : 'bg-gray-500 text-white'}`,
                                            children: response.code
                                        }),
                                        /*#__PURE__*/ _jsx("span", {
                                            className: "font-medium",
                                            children: response.status
                                        }),
                                        name !== response.status && /*#__PURE__*/ _jsxs("span", {
                                            className: "text-sm text-muted-foreground",
                                            children: [
                                                "(",
                                                name,
                                                ")"
                                            ]
                                        })
                                    ]
                                })
                            }),
                            response.headers.length > 0 && /*#__PURE__*/ _jsxs("div", {
                                className: "px-4 py-3 border-b bg-muted/30",
                                children: [
                                    /*#__PURE__*/ _jsx("p", {
                                        className: "text-sm font-medium mb-2",
                                        children: "Headers:"
                                    }),
                                    /*#__PURE__*/ _jsx("div", {
                                        className: "space-y-1",
                                        children: response.headers.map((header, index)=>/*#__PURE__*/ _jsxs("div", {
                                                className: "text-sm",
                                                children: [
                                                    /*#__PURE__*/ _jsx("code", {
                                                        className: "bg-background px-2 py-1 rounded",
                                                        children: header.key
                                                    }),
                                                    /*#__PURE__*/ _jsx("span", {
                                                        className: "text-muted-foreground ml-2",
                                                        children: header.value
                                                    })
                                                ]
                                            }, index))
                                    })
                                ]
                            }),
                            bodyContent && /*#__PURE__*/ _jsx("div", {
                                className: "dark-editor",
                                children: /*#__PURE__*/ _jsx(CodeViewer, {
                                    value: bodyContent,
                                    language: "json",
                                    theme: "dark",
                                    height: "auto",
                                    minHeight: 100,
                                    maxHeight: 500,
                                    showBorder: false,
                                    rounded: false
                                })
                            })
                        ]
                    }, name);
                })
            })
        ]
    });
}
