import React, { CSSProperties, PureComponent, ReactNode } from 'react';

interface TooltipRowData {
  key: string | number;
  keyColumn?: ReactNode;
  keyStyle?: CSSProperties;
  valueColumn: ReactNode;
  valueStyle?: CSSProperties;
}

const defaultProps = {
  className: '',
  data: [] as TooltipRowData[],
};

type Props = {
  className?: string;
  data: TooltipRowData[];
} & Readonly<typeof defaultProps>;

const VALUE_CELL_STYLE: CSSProperties = { paddingLeft: 8, textAlign: 'right' };

export default class TooltipTable extends PureComponent<Props, {}> {
  static defaultProps = defaultProps;

  render() {
    const { className, data } = this.props;

    return (
      <table className={className}>
        <tbody>
          {data.map(({ key, keyColumn, keyStyle, valueColumn, valueStyle }) => (
            <tr key={key}>
              <td style={keyStyle}>{keyColumn ?? key}</td>
              <td style={valueStyle ? { ...VALUE_CELL_STYLE, ...valueStyle } : VALUE_CELL_STYLE}>
                {valueColumn}
              </td>
            </tr>
          ))}
        </tbody>
      </table>
    );
  }
}