import React from "react";
import { BannerWrapper, Container, UploadProgressContainer } from "./styles";
import Button from "../button";
import CircularProgressBar from "./components/progressBar";
import { UploadProgress } from "./assets/uploadProgressIcon";
import ProgressBar from "../progressBar";
import UsersList from "./components/users";
import UpgradeComponent from "./components/ugradeLock";
import useTranslation from "../../hooks/useTranslation.jsx";
import wordStore from "../../mc/wordStore.json";
const users = [
  {
    name: 'Patty McDermott',
    size: '156MB',
  },
  {
    name: 'Patty McDermott',
    size: '156MB',
  },
  {
    name: 'Patty McDermott',
    size: '156MB',
  },
  {
    name: 'Patty McDermott',
    size: '156MB',
  },
  {
    name: 'Patty McDermott',
    size: '156MB',
  },
];
const FileRightBar = () => {
  const { findText } = useTranslation(wordStore);
  return (
    <Container>
      <BannerWrapper>
        <div className="head">
          <h3>{findText("Storage")}</h3>
          <p>{findText("(50% Used)")}</p>
        </div>
        <CircularProgressBar value={2.5} total={5} />
        <Button
          type="primary"
          text={findText("Upgrade Storage")}
          styles={{
            marginTop: "29px",
            fontSize: "16px",
            width: "200px",
            gap: "8px",
            padding: "15.457px 30.913px",
            height: "38.641px",
          }}
        />
      </BannerWrapper>
      <UpgradeComponent />
      <UsersList />

      <UploadProgressContainer>
        <div className="upload_icon">
          <img src={UploadProgress?.image} alt={findText("upload progress")} />
          <p>{findText("Uploading files")}</p>
        </div>
        <div className="progress">
          <ProgressBar
            value={50}
            minValue={30}
            maxValue={80}
            size={findText("sm")}
            color={findText("#30D468")}
          />
          <div className="text">
            <div className="left">
              <h5>{findText("2 of 6 Uploaded")}</h5>
            </div>
            <div className="right">
              <p>{findText("3min 22sec")}</p>
            </div>
          </div>
        </div>

        <Button
          type="primary"
          text={findText("Cancel Upload")}
          styles={{
            marginTop: "10px",
            fontSize: "14px",
            width: "206px",
            gap: "13px",
            padding: "7px 26px",
            height: "38.641px",
            background: "#F39B33",
          }}
        />
      </UploadProgressContainer>
    </Container>
  );
};
export default FileRightBar;
