import React from 'react';
import { formatMessage } from 'umi-plugin-locale';
import { Icon } from 'antd';

import styles from './style.less';

export interface SettingItemProps {
  logo: string;
  title: string;
  onClick?: () => any;
  className?: string;
}

const SettingItem: React.FC<SettingItemProps> = ({
  logo,
  title,
  onClick,
  className = '',
}) => {
  const msg = formatMessage({ id: title });
  return (
    <div className={`${styles.item} ${className}`} onClick={onClick}>
      <img className={styles.logo} src={logo} alt={msg} />
      <span className={styles.title}>{msg}</span>
      <Icon className={styles.go} type="right" />
    </div>
  );
};

export default SettingItem;
