import React from 'react';
import { Box } from '@workday/canvas-kit-react/layout';
import { ExternalHyperlink } from '@workday/canvas-kit-react';
import { Table } from './Table';
var camelToKebabCase = function (name) {
    return name.replace(/([a-z0-9]|(?=[A-Z]))([A-Z])/g, '$1-$2').toLowerCase();
};
export var StylePropsTable = function (_a) {
    var _b = _a.styleProps, styleProps = _b === void 0 ? [] : _b;
    var sortedStyleProps = styleProps.sort(function (a, b) { return a.name.localeCompare(b.name); });
    return (React.createElement(Table, null,
        React.createElement(Table.Head, null,
            React.createElement(Table.Row, null,
                React.createElement(Table.Header, null, "Prop"),
                React.createElement(Table.Header, null, "CSS Properties"),
                React.createElement(Table.Header, null, "System"))),
        React.createElement(Table.Body, null, sortedStyleProps.map(function (styleProp, index) { return (React.createElement(Table.Row, { key: index },
            React.createElement(Table.Data, { fontFamily: "monospace" }, styleProp.name),
            React.createElement(Table.Data, null, styleProp.properties.map(function (property, i) {
                var formattedName = camelToKebabCase(property);
                var mdnUrl = "https://developer.mozilla.org/en-US/docs/Web/CSS/" + formattedName;
                return (React.createElement(Box, { display: "inline-block", marginInlineEnd: "xxxs" },
                    React.createElement(ExternalHyperlink, { href: mdnUrl, key: i }, formattedName)));
            })),
            React.createElement(Table.Data, { fontFamily: "monospace" }, styleProp.system === 'none' ? '---' : styleProp.system))); }))));
};
