import { styled, Tooltip, tooltipClasses, TooltipProps } from "@mui/material";

import Typography, { ETypo, ETypoColor } from "../Typography";

type IProps = TooltipProps;

export default function TooltipElement(props: IProps) {
	const CustomTooltip = styled(({ className, ...props }: TooltipProps) => (
		<Tooltip
			{...props}
			title={
				<Typography typo={ETypo.TEXT_MD_REGULAR} color={ETypoColor.TEXT_SECONDARY}>
					{props.title}
				</Typography>
			}
			classes={{ popper: className }}
		/>
	))(({ theme }) => ({
		[`& .${tooltipClasses.tooltip}`]: {
			backgroundColor: "var(--tooltip-background, #FFF)",
			boxShadow: theme.shadows[1],
			borderRadius: "var(--tooltip-radius, 4px)",
		},
	}));

	return <CustomTooltip {...props} />;
}