import {
  standardBorderRadius,
  standardCardShadow,
  standardContentInset
} from "./chunk-HGZGGJQB.js";
import {
  isDark,
  themeOr
} from "./chunk-VAH342U2.js";

// src/components/Table/TableEmptyState.tsx
import styled from "@emotion/styled";
import { jsx, jsxs } from "@emotion/react/jsx-runtime";
var TableEmptyState = (props) => {
  const lines = [];
  for (let i = 0; i < 10; i++) {
    const percentage = randomIntFromInterval(70, 100);
    lines.push(/* @__PURE__ */ jsx(TableEmptyStateLine, { percentage }, i));
  }
  return /* @__PURE__ */ jsxs(StyledTableEmptyState, { children: [
    lines,
    props.cardTitle || props.cardText ? /* @__PURE__ */ jsx(TableEmptyStateCardContainer, { children: /* @__PURE__ */ jsxs(TableEmptyStateCard, { children: [
      props.cardTitle ? /* @__PURE__ */ jsx(TableEmptyStateCardTitle, { children: props.cardTitle }) : null,
      props.cardText ? /* @__PURE__ */ jsx(TableEmptyStateCardText, { children: props.cardText }) : null
    ] }) }) : null
  ] });
};
var StyledTableEmptyState = styled.div`
  position: relative;
  ${standardContentInset.css}
`;
var TableEmptyStateLine = styled.div`
  background: linear-gradient(
    90deg,
    ${({ theme }) => isDark(theme) ? theme.c1Neutral : theme.c05Neutral} 0%,
    rgba(242, 242, 242, 0) 100%
  );
  height: 16px;
  margin: 15px 0;
  width: ${(props) => props.percentage}%;
`;
function randomIntFromInterval(min, max) {
  return Math.floor(Math.random() * (max - min + 1) + min);
}
var TableEmptyStateCardContainer = styled.div`
  align-items: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: absolute;
  top: 0;
  height: 100%;
  width: 100%;
`;
var TableEmptyStateCard = styled.div`
  ${standardCardShadow}
  ${standardBorderRadius(16)}
  padding: 32px;
  width: 320px;
  max-width: 100%;
  ${({ theme }) => themeOr(`background-color: ${theme.bg}`, "transparent")({ theme })};
`;
var TableEmptyStateCardTitle = styled.p`
  font-weight: bold;
  margin: 0;
`;
var TableEmptyStateCardText = styled.p`
  color: ${({ theme }) => theme.c6Neutral};
  margin-top: 6px;
  margin-bottom: 0;
`;

export {
  TableEmptyState
};
