import React from 'react';

export interface ITable {
  bordered?: boolean;
  className?: string;
  hover?: boolean;
  id?: string;
  responsive?: true | 'sm' | 'md' | 'lg' | 'xl';
  size?: 'sm';
  striped?: boolean;
  style?: React.CSSProperties;
  variant?: 'light' | 'dark';
  [x: string]: any;
}
export const Table: React.FC<ITable> = (props) => {
  const { bordered, children, className = '', hover, id, responsive, size, striped, style, variant, ...otherProps } = props;

  function tableClassNames() {
    let classList = 'b-table';
    if (bordered) {
      classList += ` b-table-bordered`;
    }
    if (hover) {
      classList += ` b-table-hover`;
    }
    if (size) {
      classList += ` b-table-${size}`;
    }
    if (striped) {
      classList += ` b-table-striped`;
    }
    if (variant) {
      classList += ` b-table-${variant}`;
    }
    if (className) {
      classList += ` ${className}`;
    }
    return classList;
  }

  function containerClassNames() {
    let responsiveClass = 'b-table-responsive';
    if (responsive === 'sm' || responsive === 'md' || responsive === 'lg' || responsive === 'xl') {
      responsiveClass = `b-table-responsive-${responsive}`;
    }
    return responsiveClass;
  }

  if (responsive) {
    return (
      <div className={containerClassNames()} {...otherProps}>
        <table id={id} className={tableClassNames()} style={style}>
          {children}
        </table>
      </div>
    );
  } else {
    return (
      <table id={id} className={tableClassNames()} style={style} {...otherProps}>
        {children}
      </table>
    );
  }
};