/* eslint-disable react-hooks/exhaustive-deps */
import React from 'react';
import PropTypes from 'prop-types';
import { FaRegCalendarAlt } from "@react-icons/all-files/fa/FaRegCalendarAlt";
import useTranslate from '~hooks/useTranslate/useTranslate';
import styles from './styles.module.scss';
import Item from '../item';

export default function ListItems({ serverData }) {

  const filterData = serverData && serverData.sort((a, b) => new Date(b.drawDate) - new Date(a.drawDate));
  
  return (
    <>
      <div className={styles.resultInfo}>
        <div className={styles.drawDate}>
          <FaRegCalendarAlt size={20} color='#e00028' />
          {useTranslate('draw_date', 'Draw Date')}</div>
      </div>
      <div className={styles.lottoTypes}>
        <div className={styles.type}>
          <span className={styles.circle} />
          <span className={styles.textType}>{useTranslate('lunchtime', 'Lunchtime')}</span>
        </div>
        <div className={styles.type}>
          <span className={`${styles.circle} ${styles.circle2}`} />
          <span className={`${styles.textType} ${styles.text2Type}`}>
            {useTranslate('teatime', 'Teatime')}
          </span>
        </div>
      </div>
      <div className={styles.items}>
        {filterData?.map((res, index) => (
          // eslint-disable-next-line react/no-array-index-key
          <Item key={index} {...res} />
        ))}
      </div>
    </>
  );
}

ListItems.propTypes = {
  serverData: PropTypes.arrayOf({}),
  tab: PropTypes.string,
};
