import type { TooltipProps } from '@mui/material';
import { Button, styled, Tooltip, tooltipClasses } from '@mui/material';
import TooltipSvg from '../../../Pages/Financials/Components/UI/TooltipSvg';

const CustomizedTooltip = styled(({ className, ...props }: TooltipProps) => (
	<Tooltip
		{...props}
		classes={{
			popper: className
		}}
	/>
))({
	[`& .${tooltipClasses.tooltip}`]: {
		maxWidth: 200,
		paddingTop: 13,
		paddingBottom: 13,
		paddingLeft: 17,
		paddingRight: 17
	}
});

const CustomWidthTooltip = ({ title }: { title: string }) => (
	<CustomizedTooltip arrow placement="left" title={title}>
		<Button
			sx={{
				m: 0
			}}
		>
			<TooltipSvg />
		</Button>
	</CustomizedTooltip>
);
export default CustomWidthTooltip;