import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import styled, { css } from 'styled-components';
import { spacing } from '../../spacing';
import { Button } from '../buttonv2/Buttonv2.component';
import { Icon } from '../icon/Icon.component';
import { LargeText } from '../text/Text.component';
import { useNavigate } from 'react-router';
const EmptystateContainer = styled.div `
  ${(props) => {
    const { theme, backgroundColor } = props;
    return css `
      color: ${theme.textSecondary};
      background-color: ${backgroundColor
        ? theme[backgroundColor]
        : 'transparent'};
    `;
}}
  display: flex;
  flex-direction: column;
  width: 100%;
  padding-top: 10%;
`;
export const EmptyStateRow = styled.div `
  display: flex;
  justify-content: space-around;
  margin-bottom: ${spacing.r24};
`;
export const ActionWrapper = styled.div `
  display: flex;
  justify-content: space-around;
`;
function EmptyState(props) {
    const { icon, listedResource, link, resourceToCreate, backgroundColor } = props;
    const navigate = useNavigate();
    return (_jsxs(EmptystateContainer, { className: "sc-emptystate", backgroundColor: backgroundColor, children: [_jsx(EmptyStateRow, { children: _jsx(Icon, { name: icon, color: "infoPrimary", size: "5x", withWrapper: true }) }), _jsx(EmptyStateRow, { children: _jsx(LargeText, { children: `A list of ${listedResource.plural} will appear here.` }) }), _jsx(EmptyStateRow, { children: _jsx(LargeText, { children: !resourceToCreate
                        ? `There are no ${listedResource.plural} created yet, let's create your first ${listedResource.singular}.`
                        : `Before browsing your ${listedResource.plural}, create your first ${resourceToCreate}.` }) }), link && (_jsx(ActionWrapper, { children: _jsx(Button, { label: `Create ${resourceToCreate || listedResource.singular}`, icon: _jsx(Icon, { name: "Create-add" }), type: "button", variant: "primary", onClick: () => navigate(link) }) }))] }));
}
export { EmptyState };
