import { Badge, Group } from '@tidbcloud/uikit'
import type { ReactNode } from 'react'

interface PremiumDmPageTitleProps {
  children: ReactNode
  page: 'list' | 'create' | 'detail'
}

export const PremiumDmPageTitle = ({ children, page }: PremiumDmPageTitleProps) => {
  return (
    <Group gap={8} wrap="nowrap" data-testid="premium-dm-page-title" data-page={page}>
      <span>{children}</span>
      <Badge variant="outline" size="sm" color="carbon" c="carbon.7" fw={500} data-testid="premium-dm-preview-badge">
        Preview
      </Badge>
    </Group>
  )
}