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

interface LinesTooltipProps {
  data?: LinesTooltipData[];
  sort?: boolean;
}

export const LinesTooltip = ({ data = [], sort = true }: LinesTooltipProps) => {
  if (sort) {
    data = data?.sort((a, b) => a.value - b.value).reverse();
  }
  return (
    <div className="infografika infografika-tooltip infografika-tooltip--line">
      {data?.map((item) => {
        return (
          <div
            className="infografika-tooltip__item"
            style={{ borderBottom: `2px solid ${item.color}` }}
            key={item.label}
          >
            <div className="infografika-tooltip__label">{item.label}</div>
            <div className="infografika-tooltip__value">{item.value}</div>
          </div>
        );
      })}
    </div>
  );
};