import PropTypes from "prop-types";
import BannerInfoElement from "./BannerInfoElement";
import { useTranslation } from "react-i18next";

function BannerInfo({info}) {
    const {t} = useTranslation();

    const infoElements = Object.keys(info).map((key) => (
        <BannerInfoElement key={key} title={t(key)} description={t(info[key])} />    
    ))
    infoElements.push(
        <BannerInfoElement 
            key="date" 
            title={t('date')} 
            description={t('currentDate',{val: new Date(), formatParams: {
                val: { month: 'long', day: '2-digit', year: 'numeric'},
              },})} 
        />
    );
    return (
        <div className="flex justify-between pb-1">
            {infoElements}
        </div>
    )
}

BannerInfo.propTypes = {
    info: PropTypes.object.isRequired
}

export default BannerInfo;