import React from "react";
import { Upgrade } from "../styles";
import Button from "../../button";
// import UpgradeIcon from "../assets/Feature.png";
import EnterpriseUpgrade from "../assets/yellow-lock.png";
import Staricon from "../assets/star";
import styled from "styled-components";
import useTranslation from "../../../hooks/useTranslation.jsx";
import wordStore from "../../../mc/wordStore.json";
const UpgradeComponent = ({
  UpgradeClick,
  planState,
  siotCount = 0,
  remainingSlot = 0,
  data,
}) => {
  const { findText } = useTranslation(wordStore);
  const lowSlot = data && remainingSlot < 1;
  return (
    <Upgrade
      className={findText("{arg1} more-slot ", {
        arg1: planState === "GRACE PERIOD" ? "deactivated" : "",
      })}
    >
      <div
        className={findText("container {arg1}", {
          arg1: lowSlot ? "red" : "",
        })}
      >
        <img src={EnterpriseUpgrade} alt={findText("upgrad box")} />
        <span className="star star-1">
          <Staricon />
        </span>
        <span className="star star-2">
          <Staricon />
        </span>
        <span className="star star-3">
          <Staricon />
        </span>
        <span className="star star-4">
          <Staricon />
        </span>
        {lowSlot && (
          <div className="upgrade_text">
            <p>{findText("You are running out of slot?")}</p>
          </div>
        )}
        <SlotCount>
          <li>
            <p>{findText("Total slots:")}</p>
            <span>{siotCount}</span>
          </li>
          <li>
            <p>{findText("Used slots:")}</p>
            <span>{data?.used || 0}</span>
          </li>
        </SlotCount>

        <Button
          type="primary"
          text={findText("Buy slot")}
          disabled={planState === "GRACE PERIOD"}
          styles={{
            marginTop: "12px",
            fontSize: "16px",
            width: "171px",
            height: "38.641px",
            gap: "8px",
            padding: "15.457px 30.913px",
            boxShadow: "0px 10px 20px 0px rgba(254, 191, 16, 0.25)",
          }}
          onClick={UpgradeClick}
        />
      </div>
    </Upgrade>
  );
};
const SlotCount = styled.ul`
  list-style: none;
  width: 100%;
  padding: 0 12px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    span {
      text-align: right;
      font-size: 14px !important;
      font-weight: 400 !important;
    }
    p {
      padding: 0;
      margin: 0;
      text-align: left !important;
      color: #636666 !important;
      font-size: 14px !important;
      font-weight: 400 !important;
    }
  }
`;
export default UpgradeComponent;
