import React from 'react';
import { SearchBar } from 'antd-mobile';
import Item from './item';

import styles from './index.less';

const Index = ({ dataSource=[], buttonLable, onClickLike, onClickShare, onClickButton,showCnt }) => {
  const renderItem = () => {
    return dataSource.map(x => (
      <Item
        {...x}
        showCnt={showCnt}
        buttonLable={buttonLable}
        onClickLike={onClickLike}
        onClickShare={onClickShare}
        onClickButton={onClickButton}
      />
    ));
  };
  return (
    <div className={styles.root}>
      <div className="search">
        <SearchBar placeholder="Search" maxLength={8} />
        <div className={styles.list}>{renderItem()}</div>
      </div>
    </div>
  );
};

export default Index;