Storyden

import { Box, styled } from "@/styled-system/jsx";

type Props = {
  isError: boolean;
  message: string;
};

export function ContentDragOverlay({ isError, message }: Props) {
  return (
    <Box
      position="absolute"
      top="0"
      left="0"
      right="0"
      bottom="0"
      pointerEvents="none"
      display="flex"
      alignItems="center"
      justifyContent="center"
      backgroundColor="bg.emphasized"
      borderWidth="medium"
      borderStyle="dashed"
      borderColor={isError ? "border.error" : "accent.default"}
      borderRadius="md"
      style={{ opacity: 0.95 }}
      role="status"
      aria-live="polite"
      aria-label={message}
    >
      <styled.div
        fontSize="sm"
        fontWeight="medium"
        color={isError ? "fg.error" : "accent.default"}
        display="flex"
        flexDirection="column"
        alignItems="center"
        gap="2"
      >
        <span>{message}</span>
      </styled.div>
    </Box>
  );
}