import React, { type ReactElement } from 'react'
import { type IButtonClassProps, type IButtonProps } from './Types'
import { ButtonProps, Button as ShadButton } from '@/Components/ui/button'

const buttonTranslate: Record<string, ButtonProps['size']> = {
  xs: 'xs',
  sm: 'sm',
  med: 'default',
  lg: 'lg',
  'xlg': 'xlg'
}

export default function Button({
  testId,
  type,
  variant,
  size,
  children,
  label,
  href,
  target,
  onClick,
  onSubmit,
  className,
  defaultClassName,
  disabled = false,
  asChild = false
}: IButtonProps): ReactElement {
  const _onClick = (e: React.MouseEvent<HTMLButtonElement | HTMLAnchorElement, MouseEvent>): void => {
    if (typeof onClick === 'function') {
      onClick(e)
    }
    if (typeof onSubmit === 'function') {
      onSubmit(e)
    }
  }

  const variantToUse = variant ?? type ?? 'outline'



  return (
    <>{
      href !== undefined
        ? <ShadButton
          size={buttonTranslate[size ?? 'med']}
          className={className}
          variant={variantToUse}
          asChild>
          <a
            href={href}
            target={target}
            onClick={_onClick}
            aria-disabled={disabled}>
            {children !== undefined ? children : label}
          </a>
        </ShadButton>
        : <ShadButton
          className={className}
          size={buttonTranslate[size ?? 'med']}
          variant={variantToUse}
          disabled={disabled}
          onClick={_onClick}
          asChild={asChild}
        >
          {children !== undefined ? children : label}
        </ShadButton>
    }</>
  )
}

export type {
  IButtonClassProps,
  IButtonProps
}
