import { Typography, TypographyProps } from '@tidbcloud/uikit'
import { mergeSxList } from '@tidbcloud/uikit/utils'
import { PropsWithChildren } from 'react'

import { PageShell, PageShellProps } from 'dbaas/layouts/v5/page'

export const ProjectPageShell = ({
  children,
  bodyProps,
  headerProps,
  ...restProps
}: PropsWithChildren<PageShellProps>) => {
  return (
    <PageShell
      headerProps={{
        sticky: true,
        ...headerProps,
        sx: mergeSxList([{ '&[data-sticky]': { zIndex: 9 } }, headerProps?.sx])
      }}
      bodyProps={{ pb: 96, ...bodyProps }}
      {...restProps}
    >
      {children}
    </PageShell>
  )
}

export const DedicatedOnly = ({ children, ...rest }: PropsWithChildren<TypographyProps>) => {
  return (
    <Typography variant="body-lg" span c="carbon.7" ml={8} {...rest}>
      (Only for Dedicated clusters)
    </Typography>
  )
}