import React from "react";
import { Card } from "react-bootstrap";
import { useTranslation } from "react-i18next";

const cardStyle = {
  width: "260px",
  backgroundColor: "#1A2637",
  borderRadius: "1",
  marginTop: "0px",
};

const cardTextStyle = {
  fontSize: "15px",
  color: "white",
  padding: "0px",
};

const StatsCard  = ({totalActiveCases, totalCritical, totalDeaths, total}) => {

    const {t} = useTranslation();
    
    return (
      <div className="statsCard">
        <Card type="rounded-0" style={cardStyle}>
          <Card.Body className="div-only-mobile-cards">
            <Card.Text style={cardTextStyle}>
              {totalActiveCases && <div>
                {t("active_cases")}: <b>{totalActiveCases}</b>
              </div>}
              <div>
                {t("deaths")}: <b>{totalDeaths}</b>
              </div>
              {totalCritical && <div>
                {t("critical_condition")}: <b>{totalCritical}</b>
              </div>}
              <div>
                {t("confirmed_cases")}: <b>{total}</b>
              </div>
            </Card.Text>
          </Card.Body>
        </Card>
      </div>
    );
  }

export default StatsCard;