import { cx } from "@emotion/css"
import { useCallback } from "react"

export function LinkButton(props: {
  disabled?: boolean
  class?: string
  children: React.ReactNode
  onClick(): void
  style?: React.CSSProperties
}) {
  const { disabled, onClick, style } = props

  return (
    <a
      href="#"
      onClick={useCallback(
        (e: React.SyntheticEvent) => {
          e.preventDefault()
          if (!disabled) {
            onClick()
          }
        },
        [disabled, onClick],
      )}
      className={cx(props.class, { disabled })}
      style={style}
    >
      {props.children}
    </a>
  )
}
