import React from "react";
import { createPortal } from "react-dom";
import { DragOverlay as DndDragOverlay } from "@dnd-kit/core";
import styled from "styled-components";
import Flex from "../../../templates/flex";
import { Text } from "../../../typography";
var OverlayContainer = styled(Flex).attrs({
  background: "mainBackground",
  padding: [2, 4],
  round: 1,
  border: true
}).withConfig({
  displayName: "dragOverlay__OverlayContainer",
  componentId: "sc-z0f8hc-0"
})(["box-shadow:0 2px 8px rgba(0,0,0,0.15);opacity:0.9;"]);
var DragOverlay = function DragOverlay(_ref) {
  var activeColumn = _ref.activeColumn;
  if (!activeColumn) return null;
  return /*#__PURE__*/createPortal(/*#__PURE__*/React.createElement(DndDragOverlay, null, /*#__PURE__*/React.createElement(OverlayContainer, {
    alignItems: "center",
    gap: 2
  }, /*#__PURE__*/React.createElement(Text, {
    strong: true
  }, activeColumn.columnDef.header || activeColumn.id))), document.body);
};
export default DragOverlay;