import { useHistory } from 'react-router-dom';
import Button from './button';
import { ReactNode } from 'react';

type BackLinkProps = {
  content?: string;
  color?: string;
  children?: ReactNode;
  outline: boolean;
  flat: boolean;
  size: 'zero' | 'xs' | 'sm' | 'base' | 'lg' | 'xl';
  textSize: 'xs' | 'sm' | 'base' | 'lg' | 'xl';
  loading: boolean;
  disabled: boolean;
  className?: string;
};

function BackLink({
  outline = false,
  flat = false,
  size = 'base',
  textSize = 'sm',
  color = 'blue',
  loading = false,
  disabled = false,
  content,
  children,
  className
}: BackLinkProps) {
  const history = useHistory();
  return (
    <Button
      color={color}
      outline={outline}
      flat={flat}
      size={size}
      textSize={textSize}
      loading={loading}
      disabled={disabled}
      className={className}
      onClick={history.goBack}
    >
      {content || children}
    </Button>
  );
}

export default BackLink;
