import { Icon } from "./Icon/Icon.js";
import { UnstyledButton } from "./UnstyledButton.js";
import styled from "@emotion/styled";
import { jsx, jsxs } from "@emotion/react/jsx-runtime";
//#region src/components/SidePanel.tsx
function SidePanel({ children, visible, onClose }) {
	return /* @__PURE__ */ jsxs(StyledSidePanel, {
		visible,
		children: [/* @__PURE__ */ jsx(UnstyledButton, {
			onClick: onClose,
			children: /* @__PURE__ */ jsx(Icon, {
				name: "Close",
				width: 14,
				color: "white"
			})
		}), children]
	});
}
const StyledSidePanel = styled.div`
  background-color: rgba(0, 0, 0, 1);
  width: 356px;
  position: fixed;
  overflow: auto;
  position: fixed;
  left: 0;
  top: 0;
  bottom: 0;
  z-index: 100;
  transform: translateX(-100%);
  transition: transform 0.3s ease-in-out;
  ${({ visible }) => visible && "transform: translateX(0%);"}

  button {
    position: absolute;
    right: 20px;
    top: 20px;
  }
`;
//#endregion
export { SidePanel };
