import Provider from "relements/build/esm/theme/provider";
import Box from "relements/build/esm/ui/box";
import Text from "relements/build/esm/ui/text";

import EmptyState from "../EmptyState";
import Locked from "../Icon/locked.svg";

<Provider>

  <Box
    marginTop={15}
    flexDirection="column"
    style={{ maxHeight: "calc(100vh - 144px)", overflowY: "auto" }}
  >
    <Text variant="display-1.semi-bold">Empty State</Text>
    <Text variant="body.lg">Empty state provides the explanation of an interface in absence of data.</Text>
  </Box>

  <Box
    marginTop={50}
    flexDirection="column"
  >
    <Text variant="display-2.semi-bold">Empty State with Icon, Title and Subtitle</Text>
  </Box>

  <EmptyState
    title="Production Environment is locked."
    subtitle="Build & publish your first bot in order to access the production environment."
    icon={Locked}
  />
</Provider>