import React, { Children } from 'react';
import styles from '../styles/modules/button.module.scss';
import { getClasses } from '../utils/getClasses';

const btnTypes = {
  primary: 'primary',
  secondary: 'secondary',
};

function Button({ children, type, variant = 'primary', ...rest }) {
  return (
    <button
      className={getClasses([
        styles.button,
        styles[`button--${btnTypes[variant]}`],
      ])}
      type={type === 'submit' ? 'submit' : 'button'}
      {...rest}
    >
      {children}
    </button>
  );
}

function SelectButton({ children, ...rest }) {
  return (
    <select
      className={getClasses([styles.button, styles.button__select])}
      {...rest}
    >
      {children}
    </select>
  );
}

export { SelectButton };
export default Button;