import classNames from 'classnames'
import React from 'react'

export interface ActionButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
  variant?: 'default' | 'danger'
}

const ActionButton = ({
  variant = 'default',
  className,
  children,
  ...rest
}: ActionButtonProps) => {
  const isDanger = variant === 'danger'
  return (
    <button
      type="button"
      className={classNames(
        'flex w-full items-center gap-3 rounded-lg px-4 py-3 text-left text-sm transition-colors focus-ring disabled:cursor-not-allowed disabled:opacity-60',
        isDanger
          ? 'text-danger hover:bg-danger/50'
          : 'text-charcoal hover:bg-sand',
        className
      )}
      {...rest}
    >
      {children}
    </button>
  )
}

export default ActionButton