import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
import { ArrowLOutlineMd } from '../../../icons/ArrowLOutlineMd';
import { OverflowTypography } from '../../OverflowTypography';
import { BackButton, StyledSkeleton, TitleWrapper } from './styles';
export const Title = ({ backButton, title, isLoading, hasDescription, hasBreadcrumbs, }) => {
    if (!title && isLoading) {
        return _jsx(StyledSkeleton, { height: 20, width: 280, variant: "rounded" });
    }
    return (_jsxs(_Fragment, { children: [backButton && (_jsx(BackButton, { ...backButton, variant: "outlined", color: "grey", size: "medium", children: _jsx(ArrowLOutlineMd, {}) })), typeof title === 'string' ? (_jsx(TitleWrapper, { component: "h1", variant: "h3", "$hasDescription": hasDescription || isLoading, "$hasBreadcrumbs": hasBreadcrumbs, children: _jsx(OverflowTypography, { component: "div", variant: "inherit", children: title }) })) : (_jsx(TitleWrapper, { component: "div", role: "heading", variant: "h3", "aria-level": 1, "$hasDescription": hasDescription, "$hasBreadcrumbs": hasBreadcrumbs, children: title }))] }));
};
