import { Badge, Group, GroupProps, HoverCard, HoverCardProps, Typography } from '@tidbcloud/uikit'
import { DotProps } from '@tidbcloud/uikit/biz'
import { IconAlertCircle } from '@tidbcloud/uikit/icons'
import { capitalize } from 'lodash-es'

export const StatusVariantMap = {
  green: 'success',
  red: 'danger',
  yellow: 'warning',
  blue: 'primary',
  peacock: 'primary'
}

export const StatusBadge = ({
  color,
  variant,
  status,
  error,
  hoverCardProps,
  ...restProps
}: {
  variant: 'default' | 'success' | 'danger' | 'warning' | 'primary'
  color?: DotProps['color']
  status: string
  error?: string
  hoverCardProps?: HoverCardProps
} & GroupProps) => {
  return (
    <Group gap={8} wrap="nowrap" {...restProps}>
      <Badge variant="dot" color={color ?? variant} size="lg" p={0}>
        {capitalize(status)}
      </Badge>
      {error && (
        <HoverCard withArrow shadow="md" zIndex={2000} {...hoverCardProps}>
          <HoverCard.Target>
            <IconAlertCircle size={14} />
          </HoverCard.Target>
          <HoverCard.Dropdown>
            <Typography variant="body-md" maw={500} sx={{ wordBreak: 'break-all' }}>
              {error}
            </Typography>
          </HoverCard.Dropdown>
        </HoverCard>
      )}
    </Group>
  )
}