import './MenuIconBig.scss';
import ArrowIcon from '../../../images/home/icon_chuifeng_right@2x.png';
import { Component } from '@tarojs/taro';
import { View, Image, Text } from '@tarojs/components';
import { ComponentClass } from 'react';

type PageOwnProps = {
  onClick: () => void;
  icon: string;
  text: string;
  side: string;
};

interface MenuIconBig {
  props: PageOwnProps;
}
class MenuIconBig extends Component {
  static externalClasses = ['ex-class'];
  static defaultProps = {
    text: '',
    side: 'left',
  };

  render() {
    const { icon, text, onClick, side } = this.props;
    return (
      <View className={`MenuIconBig ${side} ex-class`} onClick={onClick}>
        <Image className='bg' src={icon} />
        {text ? (
          <View className='text-box'>
            <Text className='text'>{text}</Text>
            <Image className='arrow' src={ArrowIcon} />
          </View>
        ) : null}
      </View>
    );
  }
}

export default MenuIconBig as ComponentClass<PageOwnProps>;
