import { Group } from '@tidbcloud/uikit'
import { ExpandNavbarButtonPlaceholder, PageShellBase } from '@tidbcloud/uikit/biz'

interface TidbCreationHeaderProps {
  title: string
}

export const TidbCreationHeader = ({ title }: TidbCreationHeaderProps) => {
  return (
    <PageShellBase.Header
      sticky
      leftSection={
        <Group wrap="nowrap" gap={0}>
          <ExpandNavbarButtonPlaceholder />
          <PageShellBase.BackButton mr="md" />
        </Group>
      }
      sx={{
        backgroundColor: 'var(--mantine-color-carbon-1)'
      }}
    >
      <PageShellBase.Title>{title}</PageShellBase.Title>
    </PageShellBase.Header>
  )
}