import { Button as AstryxButton, type ButtonProps as AstryxButtonProps } from '@astryxdesign/core/Button'
import type { JSX } from 'react'

export type ButtonVariant = 'solid' | 'outline' | 'ghost'
export type ButtonTone = 'accent' | 'danger' | 'neutral'
export type ButtonSize = 'sm' | 'md'

export interface ButtonProps extends Omit<AstryxButtonProps, 'variant' | 'size' | 'label'> {
  variant?: ButtonVariant
  tone?: ButtonTone
  size?: ButtonSize
  children?: React.ReactNode
  disabled?: boolean
}

const VARIANT_TONE_TO_ASTRYX: Record<ButtonVariant, Record<ButtonTone, AstryxButtonProps['variant']>> = {
  solid: { accent: 'primary', danger: 'destructive', neutral: 'secondary' },
  outline: { accent: 'secondary', danger: 'destructive', neutral: 'secondary' },
  ghost: { accent: 'ghost', danger: 'ghost', neutral: 'ghost' },
}

export function Button({
  variant = 'solid',
  tone = 'accent',
  size = 'md',
  children,
  isDisabled,
  disabled,
  className,
  ...rest
}: ButtonProps): JSX.Element {
  const ariaLabel = rest['aria-label']
  return (
    <AstryxButton
      variant={VARIANT_TONE_TO_ASTRYX[variant][tone]}
      size={size}
      isDisabled={isDisabled ?? disabled}
      className={className}
      label={typeof children === 'string' ? children : (ariaLabel as string | undefined) ?? ''}
      {...rest}
    >
      {children}
    </AstryxButton>
  )
}