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

type ButtonColor = 'pri' | 'acc' | 'wrn' | 'dan';

interface ShortcutButtonProps {
  icon: string;
  label: string;
  color?: ButtonColor;
  onPress?: () => void;
  badge?: number;
}

const ShortcutButton: React.FC<ShortcutButtonProps> = ({
  icon,
  label,
  color = 'pri',
  onPress,
  badge,
}) => {
  const cls = ['shortcut-btn', `shortcut-btn--${color}`].join(' ');

  return (
    <View className={cls} onClick={onPress}>
      <View className="shortcut-btn__icon-wrap">
        <Text className="shortcut-btn__icon">{icon}</Text>
        {badge != null && badge > 0 && (
          <Text className="shortcut-btn__badge">
            {badge > 99 ? '99+' : badge}
          </Text>
        )}
      </View>
      <Text className="shortcut-btn__label">{label}</Text>
    </View>
  );
};

export default React.memo(ShortcutButton);