import { Group, Typography } from '@tidbcloud/uikit'
import { keyframes } from '@tidbcloud/uikit/emotion'

const ellipsisAnimation = keyframes({
  to: {
    width: '1.25em'
  }
})

export const GeneratingTips = () => {
  return (
    <Group w="100%" gap={0}>
      <Typography
        miw={105}
        c="carbon.6"
        sx={{
          '&:after': {
            maxHeight: '21px',
            overflow: 'hidden',
            display: 'inline-block',
            verticalAlign: 'bottom',
            animation: `${ellipsisAnimation} steps(4, end) 900ms infinite`,
            content: '"..."',
            width: 0
          }
        }}
      >
        AI Generating
      </Typography>
    </Group>
  )
}