import React, { ReactNode } from 'react'

import { Button, ButtonProps } from 'react-icecream'
import { AddIcon } from 'react-icecream/icons'

interface ButtonLikeLinkProps extends Pick<ButtonProps<HTMLAnchorElement>, 'type' | 'size' | 'icon' | 'loading' | 'disabled'> {
  href: string
  children: ReactNode
}

function ButtonLikeLink({ href, children, ...buttonProps }: ButtonLikeLinkProps) {
  return (
    <Button<HTMLAnchorElement>
      {...buttonProps}
      style={{ display: 'inline-block', textDecoration: 'none' }}
      as={props => <a {...props} href={href} />}
    >{children}</Button>
  )
}

export default function Demo() {
  return (
    <div className="buttons-wrapper">
      <ButtonLikeLink href="https://www.qiniu.com">Qiniu</ButtonLikeLink>
      <ButtonLikeLink disabled href="https://www.qiniu.com">disabled</ButtonLikeLink>
      <ButtonLikeLink icon={<AddIcon />} href="https://www.qiniu.com">with add icon</ButtonLikeLink>
    </div>
  )
}