<Tooltip />

// https://base-ui.com/react/components/tooltip
 
import { Tooltip as BaseTooltip } from "@base-ui-components/react/tooltip";
import clsx from "clsx";
import styles from "./Tooltip.module.scss";
 
// Tooltip.Trigger
interface TriggerProps extends BaseTooltip.Trigger.Props {
  className?: string;
}
 
const Trigger = ({ className, ...props }: TriggerProps) => (
  <BaseTooltip.Trigger className={clsx(styles.trigger, className)} {...props} />
);
 
// Tooltip.Arrow
interface ArrowProps extends BaseTooltip.Arrow.Props {
  className?: string;
}
 
const Arrow = ({ className, children, ...props }: ArrowProps) => (
  <BaseTooltip.Arrow className={clsx(styles.arrow, className)} {...props}>
    {children || <ArrowSvg />}
  </BaseTooltip.Arrow>
);
 
// Tooltip.Popup
const Popup = ({ className, ...props }: BaseTooltip.Popup.Props) => (
  <BaseTooltip.Popup className={clsx(styles.popup, className)} {...props} />
);
 
// Tooltip.Provider with default delay override
interface ProviderProps extends BaseTooltip.Provider.Props {}
const Provider = ({ delay = 100, ...props }: ProviderProps) => (
  <BaseTooltip.Provider delay={delay} {...props} />
);
 
// Tooltip.Portal
const Portal = BaseTooltip.Portal;
 
// Tooltip.Positioner
const Positioner = ({ className, ...props }: BaseTooltip.Positioner.Props) => (
  <BaseTooltip.Positioner
    className={clsx(styles.positioner, className)}
    {...props}
  />
);
 
// Tooltip.Root
const Root = (props: BaseTooltip.Root.Props) => (
  <BaseTooltip.Root {...props} />
);
 
export const Tooltip = {
  Provider,
  Root,
  Trigger,
  Popup,
  Arrow,
  Portal,
  Positioner,
};
 
// Default Arrow shape used in the Tooltip.Arrow
function ArrowSvg(props: React.ComponentProps<"svg">) {
  return (
    <svg width="20" height="10" viewBox="0 0 20 10" fill="none" {...props}>
      <title>Tooltip arrow</title>
      <path
        d="M9.66437 2.60207L4.80758 6.97318C4.07308 7.63423 3.11989 8 2.13172 8H0V10H20V8H18.5349C17.5468 8 16.5936 7.63423 15.8591 6.97318L11.0023 2.60207C10.622 2.2598 10.0447 2.25979 9.66437 2.60207Z"
        className={styles.arrowFill}
      />
      <path
        d="M10.3333 3.34539L5.47654 7.71648C4.55842 8.54279 3.36693 9 2.13172 9H0V8H2.13172C3.11989 8 4.07308 7.63423 4.80758 6.97318L9.66437 2.60207C10.0447 2.25979 10.622 2.2598 11.0023 2.60207L15.8591 6.97318C16.5936 7.63423 17.5468 8 18.5349 8H20V9H18.5349C17.2998 9 16.1083 8.54278 15.1901 7.71648L10.3333 3.34539Z"
        className={styles.arrowInnerStroke}
      />
    </svg>
  );
}