/* eslint-disable react/prop-types */
import React from 'react';
import PropTypes from 'prop-types';
import useTranslate from '~hooks/useTranslate/useTranslate';
import styles from './styles.module.scss';
import LottoIcon from '../../../../images/icons/lotto';
import BoosterLoto from '../../../../images/icons/booster-loto';
import months from '../../../../constants/months';

function Item({ drawDate, lottery, drawDetails }) {
  const date = new Date(drawDate);
  const formatDate = `${date.getDate()} ${useTranslate(months[date.getMonth()], months[date.getMonth()]) } ${date.getFullYear()}`;
  return (
    <div className={`${styles.item} ${styles[lottery]}`}>
      <div className={styles.info}>
        <p className={styles.date}>{formatDate}</p>
        <p className={styles.text}>
          {`${useTranslate('lotto_uk_49_text_1', 'UK 49s')} ${useTranslate(lottery, lottery)} ${useTranslate('lotto_uk_49_text_2', 'Result For Today')}`}
        </p>
      </div>
      <div className={styles.lottos}>
        {drawDetails &&
          drawDetails[0]?.lottery_numbers.map((res) => (
            <div key={res} className={styles.lottoIcon}>
              <LottoIcon number={res} />
            </div>
          ))}
        <div className={styles.booster}>
          <BoosterLoto />
          <span className={styles.boosterValue}>{drawDetails && drawDetails[0]?.bonus_number}</span>
        </div>
      </div>
    </div>
  );
}

Item.propTypes = {
  drawDate: PropTypes.string,
  lottery: PropTypes.string,
  drawDetails: PropTypes.arrayOf(
    PropTypes.shape({
      lottery_numbers: PropTypes.arrayOf(PropTypes.number),
      bonus_number: PropTypes.number,
    })
  ),
};

export default Item;
