import React from "react";
import { RoleNameContainer } from "./index.styled";
import ButtonComponent from "../../button";
import { roleList } from "./data";
import avatar from "../assets/images/avatar.png";
import { IoMdAdd } from "react-icons/io";
import useTranslation from "../../../hooks/useTranslation.jsx";
import wordStore from "../../../mc/wordStore.json";
const RoleName = ({ setType }) => {
  const { findText } = useTranslation(wordStore);
  return (
    <RoleNameContainer>
      <p className="rl_title">{findText("Enter role name")}</p>

      <p className="rl_perm_txt">{findText("Permissions")}</p>
      <p className="rl_perm_subtxt">
        {findText(
          "Permissions allow admins to access specific functions and perform actions."
        )}
      </p>
      <div className="role_list_row">
        {roleList?.slice(0, 4)?.map((item, idx) => (
          <div className="rlr_col" key={idx}>
            {item?.name} <span>{item?.level}</span>
          </div>
        ))}
        {roleList?.slice(0, 4)?.length > 0 && (
          <p className="rlr_others">
            {findText("+ {length} Others", {
              length: roleList?.slice(0, 4)?.length,
            })}
          </p>
        )}
      </div>
      <ButtonComponent
        text={findText("Add Permissions(s)")}
        type="secondary"
        styles={{
          width: '260px',
          padding: 10,
          height: 40,
          backgroundColor: findText("transparent"),
          marginBottom: "24px",
        }}
        icon={{
          left: true,
          jsx: IoMdAdd,
        }}
        onClick={(e) => {
          e.preventDefault();
          setType('permissions');
        }}
      />
      <p className="rl_perm_txt">{findText("Admins")}</p>
      <p className="rl_perm_subtxt">
        {findText(
          "Add admins to this role and have them access specific permissions."
        )}{" "}
      </p>

      <div className="admins_row">
        <div className="adm_img_group">
          <div className="adr_img">
            <img src={avatar} alt="" />
          </div>
          <div className="adr_img">
            <img src={avatar} alt="" />
          </div>
          <div className="adr_img">
            <img src={avatar} alt="" />
          </div>
        </div>

        <div className="adm_others">{findText("+24 Others")}</div>
      </div>
      <ButtonComponent
        text={findText("Add Admins")}
        type="secondary"
        styles={{
          width: '260px',
          padding: 10,
          height: 40,
          backgroundColor: findText("transparent"),
          marginBottom: "24px",
        }}
        icon={{
          left: true,
          jsx: IoMdAdd,
        }}
        onClick={(e) => {
          e.preventDefault();
          setType('admins');
        }}
      />

      <ButtonComponent
        text={findText("Create Role")}
        styles={{
          width: "100%",
          padding: 10,
          height: 40,
          marginTop: "60px",
        }}
        icon={{
          left: true,
        }}
        onClick={(e) => {
          e.preventDefault();
        }}
      />
    </RoleNameContainer>
  );
};
export default RoleName;
