import Link from "../Link/Link";
import useTranslateValue from "../../Utils/Translation";
import React from "react";
export var Size;
(function (Size) {
    Size["Normal"] = "text-sm";
    Size["Medium"] = "text-base";
    Size["Large"] = "text-lg";
})(Size || (Size = {}));
const FieldLabelElement = (props) => {
    var _a, _b, _c;
    const { translateString, translateValue } = useTranslateValue();
    const translatedTitle = translateString(props.title);
    const translatedDescription = translateValue(props.description);
    const translatedSideLinkText = translateString((_a = props.sideLink) === null || _a === void 0 ? void 0 : _a.text);
    const isCardStyle = props.isCardStyle || false;
    return (React.createElement("div", { className: "space-y-1" },
        translatedTitle && (React.createElement("label", { className: `${props.size || "text-xs"} font-semibold uppercase tracking-widest ${isCardStyle ? "text-gray-500" : "text-gray-500"} flex items-center gap-2` },
            React.createElement("span", { className: `${props.alignClassName} flex items-center gap-1.5` },
                translatedTitle,
                React.createElement("span", { className: "w-1 h-1 rounded-full bg-gray-300" })),
            props.sideLink && translatedSideLinkText && ((_b = props.sideLink) === null || _b === void 0 ? void 0 : _b.url) && (React.createElement(Link, { to: (_c = props.sideLink) === null || _c === void 0 ? void 0 : _c.url, className: "inline-flex items-center gap-1 text-indigo-500 hover:text-indigo-600 transition-all duration-200 font-medium normal-case tracking-normal text-xs hover:underline underline-offset-2" },
                translatedSideLinkText,
                React.createElement("svg", { className: "w-3 h-3", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor" },
                    React.createElement("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14" })))))),
        translatedDescription && (React.createElement("p", { className: `${props.alignClassName} text-xs text-gray-400 leading-relaxed mt-0.5` }, translatedDescription))));
};
export default FieldLabelElement;
//# sourceMappingURL=FieldLabel.js.map