import React from 'react';
import { Button } from 'antd';
import IconFont from '../../IconFont';

import './index.less';

const modeDicts = [
  { value: 'large', label: '大图', icon: 'icon-S_View_ArrayNum2' },
  { value: 'normal', label: '标准', icon: 'icon-S_View_ArrayNum1' },
  { value: 'low', label: '小图', icon: 'icon-S_View_ArrayNum3' },
];

export default function CardMode({ selectKey, onChange }) {
  return (
    <span className="card-mode-box">
      {modeDicts.map(v => (
        <Button className={selectKey === v.value ? 'select-mode-active' : ''} onClick={() => onChange(v.value)} title={v.label} key={v.value}>
          <IconFont type={v.icon} />
        </Button>
      ))}
    </span>
  );
}
