import { MouseEventHandler } from 'react';
import styles from './Button.module.scss';

export const Button = ({
  variant = 'default',
  onClick,
  children,
  ...props
}: {
  variant?: 'default' | 'primary' | 'secondary' | 'link';
  onClick: MouseEventHandler<HTMLButtonElement>;
  children?: React.ReactNode;
} & JSX.IntrinsicElements['button']) => {
  return (
    <button
      {...props}
      className={[styles.button, styles[variant]].join(' ')}
      onClick={onClick}
    >
      {children}
    </button>
  );
};