export type ScatterChartTooltipProps = {
  data: {
    label: string;
    value: number;
    color: string;
  };
};

export const ScatterChartTooltip = ({ data }: ScatterChartTooltipProps) => {
  return (
    <div className="infografika infografika-tooltip">
      <div
        className="infografika-tooltip__item"
        style={{ border: 0 }}
        key={data.label}
      >
        <div className="infografika-tooltip__label">
          {data.color && (
            <span
              className="infografika-tooltip__color"
              style={{
                background: data.color,
                borderRadius: '50%',
                overflow: 'hidden',
              }}
            ></span>
          )}
          <span>{data.label}</span>
        </div>
        {data.value && (
          <div className="infografika-tooltip__value">{data.value}</div>
        )}
      </div>
    </div>
  );
};