import React from "react";
import { BannerWrapper, Container } from "./styles";
import Button from "../button";
import CircularProgressBar from "./components/progressBar";
import UsersList from "./components/users";
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 className="user_banner">
      <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>
      <UsersList />
    </Container>
  );
};
export default FileRightBar;
