/* eslint-disable react/jsx-props-no-spreading */

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

// Создаем кастомный стилизованный Tooltip с правильной типизацией
const CustomTooltip = styled(({ className, ...props }: TooltipProps) => (
  <Tooltip {...props} classes={{ popper: className }} />
))(({ theme }) => ({
  [`& .${tooltipClasses.tooltip}`]: {
    backgroundColor: 'rgba(0, 0, 0, 1)',
    color: 'white',
    maxWidth: 300,
    fontSize: '0.9vw',
    border: '1px solid rgba(255, 77, 77, 0.5)',
    borderRadius: '1vw',
    padding: '1vw',
    boxShadow:
      '0 0 1vw rgba(255, 77, 77, 0.3), inset 0.8vw -0.8vw 2vw rgba(255, 77, 77, 0.15)',
    fontFamily: 'Benzin-Bold',
    '&::before': {
      content: '""',
      position: 'absolute',
      top: 0,
      left: 0,
      right: 0,
      bottom: 0,
      borderRadius: '1vw',
      // background: 'linear-gradient(45deg, rgba(255, 77, 77, 0.1), transparent)',
      zIndex: -1,
    },
  },
  [`& .${tooltipClasses.arrow}`]: {
    color: 'rgba(255, 77, 77, 0.5)',
  },
}));

export default CustomTooltip;
