import React from "react";
import { Upgrade } from "../styles";
import Button from "../../button";
import UpgradeIcon from "../assets/Feature.png";
import EnterpriseUpgrade from "../assets/enterpriseUpgrade.png";
import useTranslation from "../../../hooks/useTranslation.jsx";
import wordStore from "../../../mc/wordStore.json";
const UpgradeComponent = ({ UpgradeClick }) => {
  const { findText } = useTranslation(wordStore);
  return (
    <Upgrade>
      <div className="container">
        <img src={EnterpriseUpgrade} alt={findText("upgrad box")} />
        <div className="upgrade_text">
          <p>{findText("You are running out of slot?")}</p>
        </div>
        <p className="reminder">
          {findText("45 slots remaining out of 50 slots for bronze package")}
        </p>
        <Button
          type="primary"
          text={findText("Upgrade")}
          styles={{
            marginTop: "12px",
            fontSize: "16px",
            width: "171px",
            height: "38.641px",
            gap: "8px",
            padding: "15.457px 30.913px",
          }}
          onClick={UpgradeClick}
        />
      </div>
    </Upgrade>
  );
};
export default UpgradeComponent;
