import React, { FC, PropsWithChildren } from 'react'
import { InfoCircleOutlined } from '@ant-design/icons'
import { Tooltip } from '../Tooltip'
import styled from 'styled-components'

const StyledLabel = styled.span`
  position: relative;
  display: inline-block;
  width: 100%;
`

const StyledIcon = styled(InfoCircleOutlined)`
  position: absolute;
  font-size: 16px;
  color: #000022;
  right: 0;
`
export const LabelWithTooltip: FC<PropsWithChildren<{ title: string; primary?: boolean }>> = ({
																																																primary,
																																																children,
																																																title
																																															}) => {
	return (
		<StyledLabel>
			{children}
			<Tooltip closeable title={title} primary={primary} placement="left">
				<StyledIcon />
			</Tooltip>
		</StyledLabel>
	)
}
