import type { TooltipProps } from '@mantine/core';
import { Tooltip as MantineTooltip } from '@mantine/core';
import styled from 'styled-components';

const StyledTooltip = styled(MantineTooltip)`
  & .mantine-Tooltip-tooltip {
    margin: 20px;
  }
`;

export const Tooltip = ({ children, ...rest }: TooltipProps) => {
  return (
    <StyledTooltip
      multiline
      withinPortal
      pl={10}
      pr={10}
      py={5}
      radius="xs"
      styles={{
        tooltip: {
          background: 'var(--tooltip-bg)',
          boxShadow: '4px 4px 10px 0px rgba(0,0,0,0.2)',
          color: 'var(--tooltip-fg)',
          fontSize: '1.1rem',
          fontWeight: 550,
          maxWidth: '250px',
        },
      }}
      transitionProps={{
        duration: 250,
        transition: 'fade',
      }}
      {...rest}
    >
      {children}
    </StyledTooltip>
  );
};

Tooltip.defaultProps = {
  openDelay: 0,
  position: 'top',
  withArrow: true,
  withinPortal: true,
};