import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import styled from 'styled-components';
import { Icon } from './icon/Icon.component';
import { Loader } from './loader/Loader.component';
import { tableRowHeight, translatedMessages, } from './tablev2/TableUtils';
import { Text } from './text/Text.component';
import { Box } from './box/Box';
import { spacing } from '../spacing';
export const NoResult = styled(Box) `
  display: flex;
  justify-content: center;
  align-items: center;
  color: ${(props) => props.theme.textSecondary};
  height: ${(props) => props.height}rem;
  gap: ${spacing.r8};
`;
export const UnsuccessfulResult = (props) => {
    const { heightInRem = 5, name, locale, status, rowHeight } = props;
    const height = rowHeight ? tableRowHeight[rowHeight] : heightInRem;
    return (_jsxs(NoResult, { height: height, children: [(status === 'loading' || status === 'idle') && _jsx(Loader, {}), status === 'error' && (_jsx(Icon, { name: "Exclamation-circle", color: "statusWarning" })), _jsx(Text, { color: "textSecondary", children: translatedMessages(status, name, locale) })] }));
};
