import { Button as BaseButton } from '@base-ui/react/button';
import * as stylex from '@stylexjs/stylex';

import type { ReactNode } from 'react';

import { buttonSizes, buttonStyles, buttonVariants } from './styles';

type ButtonVariant = keyof typeof buttonVariants | 'default';
type ButtonSize = keyof typeof buttonSizes;

interface ButtonProps {
  variant?: ButtonVariant;
  size?: ButtonSize;
  onClick?: () => void;
  children: ReactNode;
  type?: 'button' | 'submit' | 'reset';
  testId?: string;
  isActive?: boolean;
  isDisabled?: boolean;
  style?: stylex.StyleXStyles;
}

export const Button = ({
  onClick,
  children,
  variant = 'default',
  size = 'large',
  type = 'button',
  testId,
  isActive,
  isDisabled,
  style,
}: ButtonProps) => {
  return (
    <BaseButton
      type={type}
      onClick={onClick}
      data-testid={testId}
      {...stylex.props(
        buttonStyles.base,
        buttonSizes[size],
        buttonVariants[variant],
        isActive && buttonStyles.active,
        isDisabled && buttonStyles.disabled,
        style
      )}
    >
      {children}
    </BaseButton>
  );
};