import { Box, Group, HoverCard, Image, ImageProps } from '@tidbcloud/uikit'
import { IconInfoCircle } from '@tidbcloud/uikit/icons'

interface InputLabelWithImgProps {
  imgProps: ImageProps
}

export const InputLabelWithImg = ({ imgProps = {}, children }: React.PropsWithChildren<InputLabelWithImgProps>) => {
  return (
    <Group gap={4} sx={{ display: 'inline-flex' }}>
      {children}
      <HoverCard shadow="md">
        <HoverCard.Target>
          <Box component={IconInfoCircle} size={16} c="carbon.7" />
        </HoverCard.Target>
        <HoverCard.Dropdown>
          <Image src={imgProps.src} w={imgProps.w} h={imgProps.h} />
        </HoverCard.Dropdown>
      </HoverCard>
    </Group>
  )
}