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

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

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