import React from 'react'

import { CloseButton } from '../button'
import { useStyleConfig, vui } from '../core'
import { cs } from '../utils'
import { useDialogContext } from './context'
import { DialogCloseButtonProps } from './dialog.types'

/** Shows a CloseButton in the Dialog Header, which by default closes the Dialog. */
export const DialogCloseButton = vui<'button', DialogCloseButtonProps>((props, ref) => {
  const { className, size = 'md', ...rest } = props
  const { onClose } = useDialogContext() ?? {}
  const styles = useStyleConfig('Dialog', useDialogContext())

  return (
    <CloseButton
      className={cs('vui-dialogCloseButton', className)}
      onClick={onClose}
      position="absolute"
      ref={ref}
      right={16}
      size={size}
      top={16}
      variant="tertiaryDark"
      {...styles.closeButton}
      {...rest}
    />
  )
})

DialogCloseButton.displayName = 'DialogCloseButton'

export default DialogCloseButton
