import { IconButton as AstryxIconButton } from '@astryxdesign/core/IconButton'
import type { ComponentPropsWithoutRef, JSX } from 'react'

/** Pointer and key handlers a drag handle needs; presence also switches the cursor to grab. */
export type IconButtonDragHandle = Pick<
  ComponentPropsWithoutRef<'button'>,
  'onPointerDown' | 'onPointerMove' | 'onPointerUp' | 'onPointerCancel' | 'onKeyDown'
>

export function IconButton(props: {
  icon: JSX.Element
  label: string
  onClick?(): void
  tone?: 'default' | 'danger'
  tooltip?: string
  dragHandle?: IconButtonDragHandle
  /** The astryx layer contract: the element receiving focus when an overlay opens. */
  'data-autofocus'?: boolean
}): JSX.Element {
  return (
    <AstryxIconButton
      icon={props.icon}
      label={props.label}
      onClick={props.onClick}
      variant={props.tone === 'danger' ? 'destructive' : 'ghost'}
      tooltip={props.tooltip}
      {...(props.dragHandle ?? {})}
      {...(props['data-autofocus'] ? { 'data-autofocus': true } : {})}
    />
  )
}