import moment from "moment";
import './ForecastContent.css';

function ForecastContent(props) {

    let image;
    let header;
    let summary;
    let date;
    let time;
    if (props.forecast != null) {
        const forecast = props.forecast

        let url = `http://157.245.192.125:3001/images/${forecast.summary.replaceAll(' ', '_')}.png`
        image = <img src={url} alt={forecast.summary} className="forecast-image"/>
        let temperature = Math.round((forecast.temperature + Number.EPSILON) * 100) / 100
        header = <p className="forecast-text">{temperature}&#8451;</p>
        summary = <p className="forecast-text">{forecast.summary}</p>
        let formattedDate = moment(forecast.date).format("DD/MM")
        date = <p className="forecast-text">{formattedDate}</p>
        let formattedTime = moment(forecast.date).format("HH:mm")
        time = <p className="forecast-text">{formattedTime}</p>
    }

    return (
        <div className="w3-quarter">
            {image}
            <div className="weather-card-container">
                {header}
                {summary}
                {date}
                {time}
            </div>
        </div>
    )
}

export default ForecastContent