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'

/**
 * A versatile button component with multiple variants and sizes for user interactions.
 * @publicDocs
 */
export interface ButtonDocProps {
  /** Visual style variant */
  variant?:
    | 'default'
    | 'secondary'
    | 'destructive'
    | 'outline'
    | 'ghost'
    | 'link'
    | 'icon'
  /** Button size */
  size?: 'default' | 'sm' | 'lg' | 'icon'
  /** Click handler */
  onClick?: React.MouseEventHandler<HTMLButtonElement>
  /** Prevent click from bubbling to parent elements */
  stopPropagation?: boolean
  /** Whether the button is disabled */
  disabled?: boolean
  /** Button content */
  children?: React.ReactNode
}

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>
  )
}