import React, { FC, MouseEvent, 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 StyledSpan = styled.span`
  right: 0;
  color: #000022;
  font-size: 16px;
  position: absolute;
`

const Span: FC<PropsWithChildren<{ onClick?: (e: MouseEvent) => void }>> = ({ onClick, children }) => {
	const handleClick = (e: any) => {
		e.preventDefault()
		onClick && onClick(e)
	}
	return <StyledSpan onClick={handleClick}>{children}</StyledSpan>
}
export const LabelWithTooltip: FC<PropsWithChildren<{ title: string; primary?: boolean }>> = ({
																																																primary,
																																																children,
																																																title
																																															}) => {
	return (
		<StyledLabel>
			{children}
			<Tooltip closeable title={title} primary={primary} placement="left">
				<Span>
					<InfoCircleOutlined />
				</Span>
			</Tooltip>
		</StyledLabel>
	)
}
