import { mergeSxList } from '@tidbcloud/uikit/utils'

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

export const ClusterPageShell = ({ children, headerProps, ...props }: PageShellProps) => {
  return (
    <PageShell
      headerProps={{
        sticky: true,
        ...headerProps,
        sx: mergeSxList([
          {
            '&[data-sticky]': {
              zIndex: 9
            }
          },
          headerProps?.sx
        ])
      }}
      {...props}
    >
      {children}
    </PageShell>
  )
}