import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
const thStyle = {
    padding: "6px 12px",
    fontWeight: 600,
    fontSize: 11,
    color: "var(--v-muted-fg)",
    textTransform: "uppercase",
    letterSpacing: 1,
    textAlign: "left",
};
const tdStyle = {
    padding: "8px 12px",
    fontSize: 13,
    fontFamily: "monospace",
    color: "var(--v-fg)",
};
export function DnsRecordsTable({ records }) {
    return (_jsxs("div", { style: { marginTop: 4 }, children: [_jsx("label", { style: {
                    fontSize: 12,
                    fontWeight: 600,
                    color: "var(--v-muted-fg)",
                    textTransform: "uppercase",
                    letterSpacing: 1,
                    marginBottom: 6,
                    display: "block",
                }, children: "DNS Records" }), _jsx("div", { style: {
                    border: "1px solid var(--v-border)",
                    borderRadius: 8,
                    overflow: "hidden",
                }, children: _jsxs("table", { style: { width: "100%", borderCollapse: "collapse", fontSize: 13 }, children: [_jsx("thead", { children: _jsxs("tr", { style: { background: "var(--v-accent)" }, children: [_jsx("th", { style: thStyle, children: "Type" }), _jsx("th", { style: thStyle, children: "Host" }), _jsx("th", { style: thStyle, children: "Value" })] }) }), _jsx("tbody", { children: records.map((r, i) => (_jsxs("tr", { style: i > 0 ? { borderTop: "1px solid var(--v-border)" } : undefined, children: [_jsx("td", { style: { ...tdStyle, fontWeight: 600, width: 70 }, children: r.type }), _jsx("td", { style: tdStyle, children: r.host }), _jsx("td", { style: tdStyle, children: r.value })] }, `${r.host}-${i}`))) })] }) })] }));
}
