import React from 'react';

import { NormalButton, DisableButton } from './styled';

export type Props = {
  appearance?:
    | 'default'
    | 'primary'
    | 'primary-hollow'
    | 'danger-hollow'
    | 'default-hollow'
    | 'dark'
    | 'link'
    | 'danger-link';
  id?: string;
  isDisabled?: boolean;
  onClick?: (e: React.MouseEvent<HTMLElement>) => void;
  onBlur?: () => void;
  onFocus?: () => void;
  shouldFitContainer?: boolean;
  align?: 'left' | 'center' | 'right';
  children: React.ReactNode;
  style?: Record<string, string>;
  isActive?: boolean;
  tabIndex?: number;
};

const Button: React.FC<Props> = ({
  children,
  isDisabled,
  onClick,
  ...rest
}: Props): React.ReactElement =>
  isDisabled ? (
    <DisableButton disabled>{children}</DisableButton>
  ) : (
    <NormalButton {...rest} onMouseDown={onClick}>
      {children}
    </NormalButton>
  );

Button.defaultProps = {
  appearance: 'default',
  align: 'center',
  shouldFitContainer: false,
  isDisabled: false,
  isActive: false,
  onFocus: (): void => {
    // do nothing
  },
};

export default Button;