import React from "react";
import { Upgrade } from "../styles";
import Button from "../../button";
import UpgradeIcon from "../assets/Feature.png";
import useTranslation from "../../../hooks/useTranslation.jsx";
import wordStore from "../../../mc/wordStore.json";
const UpgradeComponent = ({ personal }) => {
  const { findText } = useTranslation(wordStore);
  return (
    <Upgrade>
      <div className="container">
        <img src={UpgradeIcon} alt={findText("upgrad lock")} />
        {personal ? (
          <p>{findText("Upgrade to PRO for more features.")}</p>
        ) : (
          <p>
            {findText("Upgrade to")}
            <span>{findText("ENTERPRISE")}</span>
            {findText("for more features.")}
          </p>
        )}
        <Button
          type="primary"
          text={findText("Upgrade")}
          styles={{
            marginTop: "12px",
            fontSize: "16px",
            width: "171px",
            height: "38.641px",
            gap: "8px",
            padding: "15.457px 30.913px",
          }}
        />
      </div>
    </Upgrade>
  );
};
export default UpgradeComponent;
