import React from 'react';
import { Button as TaroButton, ButtonProps as TaroButtonProps, View } from '@tarojs/components';
import './index.scss';

interface ButtonProps extends TaroButtonProps {
  type?: 'primary' | 'secondary' | 'outline' | 'link';
  size?: 'large' | 'medium' | 'small';
  block?: boolean;
  round?: boolean;
  loading?: boolean;
  icon?: React.ReactNode;
  iconPosition?: 'left' | 'right';
}

/**
 * 自定义按钮组件，支持React Icons
 */
const Button: React.FC<ButtonProps> = ({
  type = 'primary',
  size = 'medium',
  block = false,
  round = false,
  loading = false,
  icon,
  iconPosition = 'left',
  className = '',
  children,
  ...rest
}) => {
  const classNames = [
    'custom-button',
    `custom-button--${type}`,
    `custom-button--${size}`,
    block ? 'custom-button--block' : '',
    round ? 'custom-button--round' : '',
    loading ? 'custom-button--loading' : '',
    icon ? `custom-button--with-icon custom-button--icon-${iconPosition}` : '',
    className,
  ].filter(Boolean).join(' ');

  return (
    <TaroButton className={classNames} {...rest}>
      {loading && <View className='custom-button__loading'></View>}
      {icon && iconPosition === 'left' && <View className='custom-button__icon'>{icon}</View>}
      <View className='custom-button__text'>{children}</View>
      {icon && iconPosition === 'right' && <View className='custom-button__icon'>{icon}</View>}
    </TaroButton>
  );
};

export default Button; 