import './demo11.css';
import React from 'react';
import ReactDOM from 'react-dom';
import Tab from '..';
function CustomTabItem({ title, desc, img }) {
  return (
    <div className="custom-tab-item">
      <div className="tab-title">
        <img className="tab-img" src={img} />
        {title}
      </div>
      <div className="tab-desc">{desc}</div>
    </div>
  );
}

const panes = [
  {
    key: 'e-checking',
    title: 'Alipay',
    desc: 'The fee to be paid is $15',
    img: 'https://img.alicdn.com/tfs/TB1wra0otTfau8jSZFwXXX1mVXa-80-80.png',
  },
  {
    key: 'brand-card',
    title: 'Bank Card',
    desc: 'The fee to be paid is $17',
    img: 'https://img.alicdn.com/tfs/TB1nKE5s79l0K4jSZFKXXXFjpXa-67-65.png',
  },
];

ReactDOM.render(
  <Tab
    shape="wrapped"
    tabRender={(key, props: any) => <CustomTabItem {...props} />}
  >
    {panes.map(pane => (
      <Tab.Item
        key={pane.key}
        {...pane}
        // @ts-ignore
        tabStyle={{ height: '60px' }}
      >
        {pane.desc}
      </Tab.Item>
    ))}
  </Tab>,
  document.getElementById('tab-demo-11'),
);