interface MaintenanceProps {
  showActions?: boolean;
  height?: StyleProp<React.CSSProperties['height']>;
}

import { Title, Text, Button, Container, Stack, Center, StyleProp } from '@mantine/core';

export function Maintenance({ showActions = false, height = '100vh' }: MaintenanceProps) {
  return (
    <Container size="sm" h={height} pos="relative">
      <Center h="100%">
        <Stack align="center" ta="center" gap="md">
          <Text size="sm" fw={500} tt="uppercase" c="dimmed" lts="var(--mantine-spacing-xs)">
            Maintenance
          </Text>

          <Title order={1} fw={900} c="brand">
            We'll Be Back Soon
          </Title>

          <Text size="md" c="dimmed">
            Our system is currently undergoing scheduled maintenance. We are working hard to bring it back online as
            soon as possible.
          </Text>

          {showActions && (
            <Button component="a" href="/" color="brand" size="sm" mt="xl">
              Back to Home
            </Button>
          )}
        </Stack>
      </Center>
    </Container>
  );
}