import React from "react";
import { BannerWrapper, Container } from "./styles";
import CircularProgressBar from "./components/progressBar";
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} />
      </BannerWrapper>
      <UpgradeComponent />
    </Container>
  );
};
export default FileRightBar;
