import React from 'react'

import {VariantProps} from 'class-variance-authority'

import {cn} from '../../lib/utils'
import {BaseButton, buttonVariants} from '../ui/button'

import {Touchable} from './touchable'

export function Button({
  className,
  variant,
  size,
  onClick,
  stopPropagation = false,
  ...props
}: React.ComponentProps<'button'> &
  VariantProps<typeof buttonVariants> & {stopPropagation?: boolean}) {
  const handleClick = React.useCallback(
    (event: React.MouseEvent<any>) => {
      onClick?.(event)
    },
    [onClick]
  )

  const wrapperClassName = cn(
    variant === 'icon' ? 'flex w-auto' : 'flex w-full'
  )

  return (
    <Touchable
      onClick={handleClick}
      stopPropagation={stopPropagation}
      className={wrapperClassName}
    >
      <BaseButton
        className={cn(className, wrapperClassName)}
        variant={variant}
        size={size}
        {...props}
      />
    </Touchable>
  )
}
