import React, { useState } from "react";
import { AdminRolesCreateContainer } from "./index.styled";
import { BackArrowIcon } from "../assets/svg/backArrow";
import RoleName from "./role-name";
import Permissions from "./permissions";
import Admins from "./admins";
import useTranslation from "../../../hooks/useTranslation.jsx";
import wordStore from "../../../mc/wordStore.json";
const AdminRolesCreate = () => {
  const { findText } = useTranslation(wordStore);
  const [type, setType] = useState(null);
  return (
    <AdminRolesCreateContainer>
      <div className="arp_header">
        <p className="arp_title">
          <span onClick={() => navigate(-1)}>
            <BackArrowIcon />
          </span>
          {findText("Create New Role")}{" "}
        </p>
        <p className="arp_ref">
          {findText("Settings")}
          <span className="slash">/</span>
          {findText("Roles&permissions")} <span className="slash">/</span>{" "}
          <span>{findText("Create New")}</span>
        </p>
      </div>

      <div className="arp_create_row">
        <div className="arp_detail_one">
          <RoleName setType={setType} />
        </div>

        <div className="hr_line"></div>

        <div className="arp_role_list">
          {type === 'admins' && <Admins />}
          {type === 'permissions' && <Permissions />}
        </div>
      </div>
    </AdminRolesCreateContainer>
  );
};
export default AdminRolesCreate;
