import React, { memo } from 'react';
import { Link } from 'react-router-dom';
import cover1 from '../../../images/cover1.png';
import cover2 from '../../../images/cover2.png';
import cover3 from '../../../images/cover3.png';
import styles from './Item.less';

const covers = [cover1, cover2, cover3];

function Item({ id, name }) {
  return (
    <li className={styles.container}>
      <Link to={`/app/detail/${id}`}>
        <div className={styles.cover} style={{ backgroundImage: `url(${covers[id % 3]})` }} />
        <div className={styles.name}>{name}</div>
      </Link>
    </li>
  );
}
export default memo(Item);
