import Image from "../Ui/Image";
import { Student } from "../../types/Item";
import { useNavigate, useParams } from "react-router-dom";
import { useGetStudent } from "../../api/student";
import { useTranslation } from "react-i18next";

const StudentBehavior = () => {
  const { student_id } = useParams();
  const { data: studentData } = useGetStudent({
    show: student_id,
  });

  const userData: Student | {} = studentData?.data ?? {};

  const { positiveNote, warningNote, alertNote } = userData as Student;
  const [t] = useTranslation();
  const navigate = useNavigate();
  const handelnavigate = () => {
    navigate(`note`);
  };
  const Data = [
    {
      icon: "/Icon/medal.png",
      title: t("array.UserInfo.appreciation"),
      value: positiveNote,
      buttonText: t("practical.show"),
    },
    {
      icon: "/Icon/warning.png",
      title: t("array.UserInfo.warning"),
      value: warningNote,
      buttonText: t("practical.show"),
    },
    {
      icon: "/Icon/Error.png",
      title: t("array.UserInfo.alert"),
      value: alertNote,
      buttonText: t("practical.show"),
    },
  ];
  return (
    <div className="StudentBehavior">
      <header>{t("header.Student_classroom_behavior")}</header>
      <main>
        {Data.map((item, index) => (
          <article key={index} onClick={handelnavigate}>
            <Image src={item.icon} />
            <div>
              <h6>{item.title}</h6>
              <p>{item.value}</p>
            </div>
            <button>{item.buttonText}</button>
          </article>
        ))}
      </main>
    </div>
  );
};

export default StudentBehavior;