import { Center, Loader, Overlay, Stack, Text } from "@mantine/core";

type FullScreenLoadingProps = {
  visible: boolean;
  text?: string;
};

export default function FullScreenLoading({
  visible,
  text = "Memproses data...",
}: FullScreenLoadingProps) {
  if (!visible) return null;

  return (
    <Overlay fixed blur={6} backgroundOpacity={0.3} zIndex={10000}>
      <Center h="100%">
        <Stack align="center" justify="center">
          <Loader size="lg" />
          <Text size="sm" c="dimmed">
            {text}
          </Text>
        </Stack>
      </Center>
    </Overlay>
  );
}

const overlayStyle: React.CSSProperties = {
  position: "fixed",
  inset: 0,
  zIndex: 9999,
  backdropFilter: "blur(6px)",
  backgroundColor: "rgba(255, 255, 255, 0.6)",
};

const contentStyle: React.CSSProperties = {
  flexDirection: "column",
};