/* 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, 0.9)',
    color: '#fff',
    maxWidth: 300,
    fontSize: '0.9vw',
    border: '1px solid rgba(242, 113, 33, 0.5)',
    borderRadius: '1vw',
    padding: '1vw',
    boxShadow: `
      0 0 1.5vw rgba(242, 113, 33, 0.4),
      0 0 0.5vw rgba(233, 64, 87, 0.3),
      inset 0 0 0.5vw rgba(138, 35, 135, 0.2)
    `,
    fontFamily: 'Benzin-Bold',
    background: `
      linear-gradient(
        135deg,
        rgba(0, 0, 0, 0.95) 0%,
        rgba(20, 20, 20, 0.95) 100%
      )
    `,
    position: 'relative',
    zIndex: 1,
    '&::before': {
      content: '""',
      position: 'absolute',
      top: 0,
      left: 0,
      right: 0,
      bottom: 0,
      borderRadius: '1vw',
      padding: '2px',
      background: `
        linear-gradient(
          135deg,
          rgba(242, 113, 33, 0.8) 0%,
          rgba(233, 64, 87, 0.6) 50%,
          rgba(138, 35, 135, 0.4) 100%
        )
      `,
      WebkitMask: `
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0)
      `,
      WebkitMaskComposite: 'xor',
      maskComposite: 'exclude',
      zIndex: -1,
    },
  },
  [`& .${tooltipClasses.arrow}`]: {
    color: 'rgba(242, 113, 33, 0.9)',
    '&::before': {
      background: `
        linear-gradient(
          135deg,
          rgba(242, 113, 33, 0.9) 0%,
          rgba(233, 64, 87, 0.7) 50%,
          rgba(138, 35, 135, 0.5) 100%
        )
      `,
      border: '1px solid rgba(242, 113, 33, 0.5)',
    },
  },
}));

export default CustomTooltip;
