import { Typography, Button, Stack } from '@tidbcloud/uikit'
import { IconInbox01 } from '@tidbcloud/uikit/icons'
import { Link } from 'react-router-dom'

import { AccessGuard } from 'dbaas/contexts/access-control'

export const EmptyPlaceholder = () => {
  return (
    <Stack align="center" justify="center" mih={512}>
      <IconInbox01 size={40} />
      <AccessGuard
        id="ClusterCreationGate"
        fallback={
          <Typography variant="headline-lg">Please contact your administrator to create your first cluster</Typography>
        }
      >
        <Typography variant="headline-lg">Get started by creating your first cluster</Typography>
        <Button
          component={Link}
          data-testid="create-cluster-button"
          to="/clusters/create-cluster"
          data-mp-event="Create Cluster Button Clicked"
          data-mp-source="Empty Cluster Page"
          sx={(theme) => ({
            '&:hover': {
              color: theme.white,
              textDecoration: 'none'
            }
          })}
        >
          Create Cluster
        </Button>
      </AccessGuard>
    </Stack>
  )
}