"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.Title = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const ArrowLOutlineMd_1 = require("../../../icons/ArrowLOutlineMd");
const OverflowTypography_1 = require("../../OverflowTypography");
const styles_1 = require("./styles");
const Title = ({ backButton, title, isLoading, hasDescription, hasBreadcrumbs, }) => {
    if (!title && isLoading) {
        return (0, jsx_runtime_1.jsx)(styles_1.StyledSkeleton, { height: 20, width: 280, variant: "rounded" });
    }
    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [backButton && ((0, jsx_runtime_1.jsx)(styles_1.BackButton, { ...backButton, variant: "outlined", color: "grey", size: "medium", children: (0, jsx_runtime_1.jsx)(ArrowLOutlineMd_1.ArrowLOutlineMd, {}) })), typeof title === 'string' ? ((0, jsx_runtime_1.jsx)(styles_1.TitleWrapper, { component: "h1", variant: "h3", "$hasDescription": hasDescription || isLoading, "$hasBreadcrumbs": hasBreadcrumbs, children: (0, jsx_runtime_1.jsx)(OverflowTypography_1.OverflowTypography, { component: "div", variant: "inherit", children: title }) })) : ((0, jsx_runtime_1.jsx)(styles_1.TitleWrapper, { component: "div", role: "heading", variant: "h3", "aria-level": 1, "$hasDescription": hasDescription, "$hasBreadcrumbs": hasBreadcrumbs, children: title }))] }));
};
exports.Title = Title;
