import s from './button.module.scss';
import {
  ButtonHTMLAttributes,
  DetailedHTMLProps,
  FunctionComponent,
  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';
  fullWidth?: boolean;
} & DetailedHTMLProps<
  ButtonHTMLAttributes<HTMLButtonElement>,
  HTMLButtonElement
>;

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