import React from "react";
import { AdminDashboardContainer } from "./index.styled";
import { Link, useNavigate } from "react-router-dom";
import caution from "./assets/images/caution.png";
import useTranslation from "../../hooks/useTranslation.jsx";
import wordStore from "../../mc/wordStore.json";
const AdminDashboard = () => {
  const { findText } = useTranslation(wordStore);
  const navigate = useNavigate();
  const testArray = [
    {
      title: 'Comment on lesson',
      subtitle:
        '[name of reviewer] left a comment on your lesson/skill test draft. ',
    },
    {
      title: 'Publish your lesson',
      subtitle:
        'Your lesson/skill test has been reviewed and is clear for liftoff.',
    },
    {
      title: 'Review rejected',
      subtitle:
        'Your lesson/skill test has been reviewed and is clear for liftoff.',
    },
    {
      title: 'Review rejected',
      subtitle:
        'Your lesson/skill test has been reviewed and is clear for liftoff.',
    },
    {
      title: 'Review rejected',
      subtitle:
        'Your lesson/skill test has been reviewed and is clear for liftoff.',
    },
    {
      title: 'Review rejected',
      subtitle:
        'Your lesson/skill test has been reviewed and is clear for liftoff.',
    },
  ];
  return (
    <AdminDashboardContainer>
      <div className="admin_dashtop_header">
        <h5 className="adh_title">{findText("Welcome back, First Name")}</h5>
        <p className="adh_subtitle">{findText("Daily motivational quote")}</p>
      </div>

      <div className="admin_dash_row_two">
        <div className="adh_group_one">
          <div className="adg_img">
            <img src="" alt="" />
          </div>
          <div className="adh_box">
            <p className="adb_title">{findText("Betty Gerhold")}</p>
            <p className="adb_subtitle">
              {findText("Daily motivational quote")}
            </p>
          </div>
        </div>

        <div className="adh_group_two">
          <div className="adh_view_group">
            <span>{findText("Role")}</span>
            {findText("IT Support")}
          </div>
          <div className="adh_view_group">
            <span>{findText("Permissions")}</span>4
          </div>
        </div>
      </div>

      <div className="admin_dash_row_three">
        <div className="att_group_one">
          <div className="adm_notify_header">
            <div className="adm_nh_one">
              <p className="adm_nh_title">{findText("Notification")}</p>
              <p className="adm_nh_subtitle">
                {findText("Real-time notifications and alerts for you")}
              </p>
            </div>

            <Link to={findText("#")}>{findText("See all")}</Link>
          </div>

          <div className="adm_notify_body">
            {testArray.map((item, idx) => (
              <div className="notification_row">
                <div className="nr_img">
                  <img src={caution} alt="" />
                </div>

                <div className="nr_main">
                  <p className="nrm_title"> {item.title}</p>
                  <p className="nrm_subtitle">{item.subtitle}</p>
                </div>

                <div className="nr_time"> 9:42 AM </div>
              </div>
            ))}
          </div>
        </div>

        <div className="att_group_two">
          <p className="activity_log_title">{findText("Activity Log")}</p>
          <p className="activity_log_subtitle">{findText("Recent Activity")}</p>

          <div className="activity_log_body">
            <div className="activity_log_col">
              <div className="log_item">
                <span>{findText("Login:")}</span>
                {findText("2 minutes ago")}{" "}
              </div>
              <div className="log_item">
                <span>{findText("From:")}</span> 103.242.92.10
              </div>
              <div className="log_item">
                <span>{findText("Device:")}</span>
                {findText("Chrome on Mac")}
              </div>
            </div>
            <div className="activity_log_col">
              <div className="log_item">
                <span>{findText("Updated profile email:")}</span>
                {findText("2 minutes ago")}{" "}
              </div>
              <div className="log_item">
                <span>{findText("From:")}</span> 103.242.92.10
              </div>
              <div className="log_item">
                <span>{findText("Device:")}</span>
                {findText("Chrome on Mac")}
              </div>
            </div>
            <div className="activity_log_col">
              <div className="log_item">
                <span>{findText("Publish Lesson:")}</span>
                {findText("2 minutes ago")}{" "}
              </div>
              <div className="log_item">
                <span>{findText("Language:")}</span>
                {findText("English")}{" "}
              </div>
              <div className="log_item">
                <span>{findText("From:")}</span> 103.242.92.10
              </div>
              <div className="log_item">
                <span>{findText("Device:")}</span>
                {findText("Chrome on Mac")}
              </div>
            </div>
            <div className="activity_log_col">
              <div className="log_item">
                <span>{findText("Updated profile email:")}</span>
                {findText("2 minutes ago")}{" "}
              </div>
              <div className="log_item">
                <span>{findText("From:")}</span> 103.242.92.10
              </div>
              <div className="log_item">
                <span>{findText("Device:")}</span>
                {findText("Chrome on Mac")}
              </div>
            </div>
          </div>
        </div>
      </div>

      <div className="admin_dash_row_four">
        <div className="ld_one">
          <p className="activity_log_title">{findText("Login details")}</p>
          <p className="activity_log_subtitle" onClick={() => navigate("")}>
            {findText("See your login history")}
          </p>

          <div className="activity_log_body">
            <div className="activity_log_col">
              <div className="log_item">
                <span>{findText("Login:")}</span>
                {findText("2 minutes ago")}{" "}
              </div>
              <div className="log_item">
                <span>{findText("From:")}</span> 103.242.92.10
              </div>
              <div className="log_item">
                <span>{findText("Device:")}</span>
                {findText("Chrome on Mac")}
              </div>
            </div>
            <div className="activity_log_col">
              <div className="log_item">
                <span>{findText("Login:")}</span>
                {findText("Yesterday")}
              </div>
              <div className="log_item">
                <span>{findText("From:")}</span> 103.242.92.10
              </div>
              <div className="log_item">
                <span>{findText("Device:")}</span>
                {findText("Chrome on Mac")}
              </div>
            </div>
            <div className="activity_log_col">
              <div className="log_item">
                <span>{findText("Login:")}</span>
                {findText("May 2, 2023")}
              </div>
              <div className="log_item">
                <span>{findText("Language:")}</span>
                {findText("English")}{" "}
              </div>
              <div className="log_item">
                <span>{findText("From:")}</span> 103.242.92.10
              </div>
              <div className="log_item">
                <span>{findText("Device:")}</span>
                {findText("Chrome on Mac")}
              </div>
            </div>
            <div className="activity_log_col">
              <div className="log_item">
                <span>{findText("Login:")}</span>
                {findText("May 2, 2023")}
              </div>
              <div className="log_item">
                <span>{findText("Language:")}</span>
                {findText("English")}{" "}
              </div>
              <div className="log_item">
                <span>{findText("From:")}</span> 103.242.92.10
              </div>
              <div className="log_item">
                <span>{findText("Device:")}</span>
                {findText("Chrome on Mac")}
              </div>
            </div>
          </div>
        </div>

        <div className="ld_two">
          <div className="ld_two_header">
            <div className="reg_title">{findText("Regions and Users")}</div>
            <div className="sd_header">
              <div className="sd_mark">
                <span className="dot_one"></span>
                {findText("High No. of users")}
              </div>
              <div className="sd_mark">
                <span className="dot_two"> </span>
                {findText("Learngual presence")}
              </div>
              <div className="sd_mark">
                <span className="dot_three"></span>
                {findText("No learngual Presence")}
              </div>
            </div>
          </div>

          <div className="sd_body"></div>
        </div>
      </div>
    </AdminDashboardContainer>
  );
};
export default AdminDashboard;
