import { jsx, css } from "@emotion/core";
import { string, shape } from "prop-types";
import { Fragment } from "react";
import TimelineIcon from "@material-ui/icons/Timeline";
import CivicSandboxDashboard from "../CivicSandboxDashboard/CivicSandboxDashboard";

var SandboxDrawerVisualization = function SandboxDrawerVisualization(props) {
  var selectedPackage = props.selectedPackage,
      selectedPackageDescription = props.selectedPackageDescription,
      selectedFoundationDatum = props.selectedFoundationDatum;
  return jsx(Fragment, null, jsx("div", {
    css: css("\n            position: relative;\n            z-index: 900;\n          ")
  }, jsx("div", {
    css: css("margin: 0 10px;")
  }, jsx("h2", null, jsx(TimelineIcon, {
    fontSize: "large",
    css: css("\n                vertical-align: middle;\n                padding-right: 4px;\n              ")
  }), "Data Detail"), jsx("h3", null, selectedPackage), jsx("p", null, selectedPackageDescription))), jsx(CivicSandboxDashboard, {
    data: selectedFoundationDatum,
    isDashboardOpen: true,
    standalone: true
  }));
};

export default SandboxDrawerVisualization;
SandboxDrawerVisualization.propTypes = {
  selectedPackage: string,
  selectedPackageDescription: string,
  selectedFoundationDatum: shape({})
};