import React, { useState } from "react";
import { PreviewPanelContainer } from "./index.styled";
import { CloseIcon } from "../assets/svg/close";
import { adminPanelList } from "../create/data";
import { CloseRedIcon } from "../assets/svg/close-red";
import useTranslation from "../../../hooks/useTranslation.jsx";
import wordStore from "../../../mc/wordStore.json";
const PreviewAdminsPanel = ({ close }) => {
  const { findText } = useTranslation(wordStore);
  return (
    <PreviewPanelContainer>
      <div className="adp_main_content">
        <div className="adp_header">
          <p className="adp_header_title">{findText("Admins")}</p>

          <span className="close_icon" onClick={close}>
            <CloseIcon />
          </span>
        </div>
        <p className="adp_subtitle">
          {findText("Add admins to this role and have them access specific")}
          <br />
          {findText("permissions.")}
        </p>

        <div className="adp_body">
          {adminPanelList?.map((item, idx) => (
            <div className="adp_list_row" key={idx}>
              <div className="adp_wrapper">
                <div className="adp_img">
                  <img src={item?.image} alt="" />
                </div>

                <div>
                  <p className="adp_title">{item?.name}</p>
                  <p className="adp_stat">
                    <span> </span>
                    {item?.status}
                  </p>
                </div>
              </div>
              <span className="close_icon" onClick={close}>
                <CloseRedIcon />
              </span>
            </div>
          ))}
        </div>
      </div>
    </PreviewPanelContainer>
  );
};
export default PreviewAdminsPanel;
