import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { forwardRef } from 'react';
import styled, { css } from 'styled-components';
import { rgba } from 'polished';
import Flex from '../Flex';
import Icon, { StyledIcon, registerIcon } from '../Icon';
import * as galaxyIcon from '../Icon/icons/galaxy.icon';
import * as folderEmptyIcon from '../Icon/streamline-icons/folder-empty.icon';
import Text from '../Text';
import { tryCatch, withTestIds } from '../../utils';
import { useI18n, useTestIds, useTheme } from '../../hooks';
import { defaultThemeProp } from '../../theme';
import { getEmptyStateTestIds } from './EmptyState.test-ids';
registerIcon(galaxyIcon);
registerIcon(folderEmptyIcon);
export const StyledEmptyState = styled.div(({ theme }) => {
    const color = tryCatch(() => rgba(theme.base.palette['foreground-color'], theme.base.transparency['transparent-2']));
    return css `
    height: 100%;

    ${StyledIcon} {
      font-size: 1.5rem;
      height: 1.5rem;
      width: 1.5rem;
      color: ${color};
    }
  `;
});
StyledEmptyState.defaultProps = defaultThemeProp;
const EmptyState = forwardRef(function EmptyState(props, ref) {
    const { base: { 'icon-set': iconSet } } = useTheme();
    const t = useI18n();
    const { testId, message = t('no_items'), ...restProps } = props;
    const testIds = useTestIds(testId, getEmptyStateTestIds);
    return (_jsxs(Flex, { "data-testid": testIds.root, ...restProps, as: StyledEmptyState, ref: ref, container: { direction: 'column', alignItems: 'center', justify: 'center', gap: 1 }, children: [_jsx(Icon, { "data-testid": testIds.icon, name: iconSet === 'streamline' ? 'folder-empty' : 'galaxy' }), _jsx(Text, { "data-testid": testIds.message, variant: 'secondary', children: message })] }));
});
export default withTestIds(EmptyState, getEmptyStateTestIds);
//# sourceMappingURL=EmptyState.js.map