import { ActionIcon, Tooltip } from "@mantine/core";
import { IconInfoCircle } from "@tabler/icons-react";

interface InfoHintProps {
  label: string;
  width?: number;
  ariaLabel?: string;
}

export function InfoHint({ label, width = 320, ariaLabel = "More info" }: InfoHintProps) {
  return (
    <Tooltip
      multiline
      w={width}
      withArrow
      events={{ hover: true, focus: true, touch: true }}
      label={label}
      color="blue.0"
      styles={{
        tooltip: {
          color: "var(--mantine-color-blue-9)",
          border: "1px solid var(--mantine-color-blue-2)",
          fontWeight: 500,
        },
      }}
    >
      <ActionIcon variant="subtle" color="blue" aria-label={ariaLabel}>
        <IconInfoCircle size={18} />
      </ActionIcon>
    </Tooltip>
  );
}