import type { ButtonHTMLAttributes, Ref } from 'react'
import { Button as ReuiButton } from '@/components/ui/button'

export type ButtonVariant = 'primary' | 'secondary' | 'danger'

/*
The console's button is ReUI's: the three variants map onto its `default`, `outline`
and `destructive`, and the two sizes onto `default` and `sm`.

`size="sm"` is the button for a table row. It existed as `.ib` copied across three
modules and did not exist in DHCP, which used the large button: the same action
("Edit") looked different depending on which screen you were on.
*/
const VARIANT = { primary: 'default', secondary: 'outline', danger: 'destructive' } as const

export function Button({
  variant = 'secondary',
  size = 'md',
  icon = false,
  className,
  ref,
  ...rest
}: ButtonHTMLAttributes<HTMLButtonElement> & {
  variant?: ButtonVariant
  size?: 'md' | 'sm'
  /** No label: an icon only. The width comes from the icon, not from text. */
  icon?: boolean
  ref?: Ref<HTMLButtonElement>
}) {
  return (
    <ReuiButton
      ref={ref}
      variant={VARIANT[variant]}
      size={icon ? (size === 'sm' ? 'icon-sm' : 'icon') : size === 'sm' ? 'sm' : 'default'}
      data-variant={variant}
      data-icon={icon || undefined}
      className={className}
      {...rest}
    />
  )
}