import React from "react";
import { Users } from "../styles";
import UploadOwner from "../assets/uploadOwner.png";
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 UsersList = () => {
  const { findText } = useTranslation(wordStore);
  return (
    <Users>
      <div className="top">
        <h4>{findText("Users")}</h4>
        <p>{findText("View All")}</p>
      </div>

      {users?.map((user) => (
        <div className="table">
          <div className="user">
            <img src={UploadOwner} alt="user" />
            <div className="text">
              <h3>{user?.name}</h3>
              <p>{user?.size}</p>
            </div>
          </div>
        </div>
      ))}
    </Users>
  );
};
export default UsersList;
