import { jsx as _jsx } from "react/jsx-runtime";
import Tooltip from '../../Tooltip';
import useOverflowed from '../../../../hooks/useOverflowed';
import { Link as MuiLink, Typography, useTheme } from '@mui/material';
const ellipsisSx = {
    display: 'block',
    overflow: 'hidden',
    textOverflow: 'ellipsis',
    whiteSpace: 'nowrap',
    minWidth: 0,
    maxWidth: '100%',
};
export const BreadcrumbsItemText = ({ link, isLink, darkBackground, }) => {
    const theme = useTheme();
    const { ref, overflowed } = useOverflowed();
    const content = isLink ? (_jsx(MuiLink, { ref: ref, href: link.href, onClick: link.onClick, component: link.component ?? 'a', sx: ellipsisSx, children: link.title })) : (_jsx(Typography, { ref: ref, variant: "globalS", sx: {
            color: darkBackground
                ? theme.palette.new.text.neutral.inverted
                : theme.palette.new.text.neutral.default,
            ...ellipsisSx,
        }, children: link.title }));
    return (_jsx(Tooltip, { disableTooltip: !overflowed, description: link.title, children: content }));
};
