import React from 'react';

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

export type Props = {
  appearance?: 'default' | 'primary' | 'primary-hollow' | 'default-hollow' | 'link' | 'danger-link';
  id?: string;
  isDisabled?: boolean;
  onClick?: () => void;
  onBlur?: () => void;
  shouldFitContainer?: boolean;
  align?: 'left' | 'center' | 'right';
  children: React.ReactNode;
  isActive?: boolean;
  style?: {};
};

const Button: React.FunctionComponent<Props> = ({
  appearance = 'default',
  isDisabled = false,
  onClick,
  onBlur,
  id,
  shouldFitContainer = false,
  align = 'center',
  children,
  style,
}: Props): React.ReactElement => {
  const transferProps = {
    appearance,
    onClick,
    onBlur,
    id,
    shouldFitContainer,
    align,
    style,
  };

  return (
    isDisabled ? (
      <DisableButton>
        {children}
      </DisableButton>
    ) : (
      <NormalButton
        {...transferProps}
      >
        {children}
      </NormalButton>
    )
  );
};

export default Button;
