import React from 'react';
import s from './weather-styles.module.css';
import get3DaysForecast from '../redux-weather-project/methods.js';
import { Card, CardDeck } from 'react-bootstrap';

const
const WeatherComponent = () => {

    // let tepmMap = get3DaysForecast();

    // let arrayTemp=Array.from(tepmMap.values()); //нужен await для асинхронного возврата данных [{} {} {}]
    ////////////////// Test ////////
    let getArrayTemp=async()=>{
        let arrayTemp=await get3DaysForecast();
        let arrayMap=Array.from(arrayTemp.values());
        return arrayMap;

    }
    getArrayTemp()
        .then(resMap=>console.log(resMap))
        .catch(error=>console.log(error));
    // let mapCollection = new Map();

    // for (let i = 1; i <= 3; i++) {

    //     mapCollection.set(i, { sum: 5, count: i })

    // }
    // let numbers = Array.from(mapCollection.values())

    const cardElements = (resMap.map((el) => {
        return (
            <Card className={s.Card}>
                <Card.Img variant="top" src="#" />
                <Card.Body className={s.CardBox}>
                    <Card.Title>{el.count}</Card.Title>
                    <Card.Text>{el.tempSum}</Card.Text>
                </Card.Body>
            </Card>
        )

    }))

    return (
        <div>
            <CardDeck className={s.CardContainer}>
                {cardElements}
            </CardDeck>
        </div>
    )

}
export default WeatherComponent;