import React from 'react';
import { View, Text } from '@tarojs/components';
import './index.scss';

interface SecondaryButtonProps {
  children: React.ReactNode;
  onClick?: () => void;
  disabled?: boolean;
  className?: string;
}

const SecondaryButton: React.FC<SecondaryButtonProps> = ({
  children,
  onClick,
  disabled = false,
  className = '',
}) => {
  const cls = [
    'secondary-btn',
    disabled && 'secondary-btn--disabled',
    className,
  ].filter(Boolean).join(' ');

  return (
    <View className={cls} role="button" aria-disabled={disabled} onClick={!disabled ? onClick : undefined}>
      <Text className='secondary-btn__text'>{children}</Text>
    </View>
  );
};

export default React.memo(SecondaryButton);