import s from './button.module.scss';
import { FunctionComponent, HTMLAttributes, ReactNode, SVGProps } from 'react';
import { clsx } from 'clsx';

type ButtonProps = {
  className?: string;
  children?: ReactNode;
  disabled?: boolean;
  Icon?: FunctionComponent<SVGProps<SVGSVGElement>>;
  onClick?: () => void;
  variant?: 'default' | 'orange' | 'ghost';
} & HTMLAttributes<HTMLButtonElement>;

export default function Button({
  className,
  children,
  onClick,
  Icon,
  disabled,
  variant = 'default',
  ...props
}: ButtonProps) {
  return (
    <button
      className={clsx(
        s.Button,
        disabled && s.Button_disabled,
        s['Button_' + variant],
        className,
      )}
      onClick={onClick}
      disabled={disabled}
      {...props}
    >
      {Icon && <Icon />}
      {children}
    </button>
  );
}
