import { Box, Stack, Typography } from '@tidbcloud/uikit'

export const TableFallback = ({
  children,
  height = 'calc(100vh - 220px)'
}: {
  children: React.ReactNode
  height?: string | number
}) => (
  <Box
    sx={{
      height,
      backgroundColor: 'var(--mantine-color-carbon-0)'
    }}
  >
    {children}
  </Box>
)

const TableEmptyStatus = ({ title, desc }: { title: string; desc: string }) => {
  return (
    <Stack gap={24} align="center" justify="center" maw={720} h="100%" m="auto">
      <Typography fz={18} fw={700} c="carbon.7" ta="center">
        {title}
      </Typography>
      <Typography variant="body-lg" c="carbon.7" ta="center" sx={{ textWrap: 'balance' }}>
        {desc}
      </Typography>
    </Stack>
  )
}

TableFallback.displayName = 'TableFallback'
TableFallback.Empty = TableEmptyStatus