import { makeStyles, tokens } from "@fluentui/react-components";

const useStyles = makeStyles({
  tooltip: {
    backgroundColor: tokens.colorNeutralBackground1,
    border: `1px solid ${tokens.colorNeutralStroke2}`,
    borderRadius: tokens.borderRadiusSmall,
    padding: `${tokens.spacingVerticalXS} ${tokens.spacingHorizontalS}`,
    color: tokens.colorNeutralForeground1,
    fontSize: tokens.fontSizeBase200,
  },
});

interface ChartTooltipProps {
  active: boolean;
  children: React.ReactNode;
}

export function ChartTooltip({ active, children }: ChartTooltipProps): React.JSX.Element | null {
  const styles = useStyles();
  if (!active) return null;
  return <div className={styles.tooltip}>{children}</div>;
}