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';
const EmptystateContainer = styled.div `
  ${(props) => {
    const brand = props.theme;
    return css `
      color: ${brand.textSecondary};
    `;
}}
  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, label, link, history } = props;
    return (_jsxs(EmptystateContainer, { className: "sc-emptystate", children: [_jsx(EmptyStateRow, { children: _jsx(Icon, { name: icon, color: "infoPrimary", size: "5x", withWrapper: true }) }), _jsx(EmptyStateRow, { children: _jsxs(LargeText, { children: ["A list of ", `${label}s`, " will appear here."] }) }), _jsx(EmptyStateRow, { children: _jsxs(LargeText, { children: ["There are no ", `${label}s`, " created yet, let's create your first", ' ', label, "."] }) }), history && (_jsx(ActionWrapper, { children: _jsx(Button, { label: `Create ${label}`, icon: _jsx(Icon, { name: "Create-add" }), type: "button", variant: "primary", onClick: () => history.push(link) }) }))] }));
}
export { EmptyState };
