import { useNavigate } from "react-router-dom";
import IconFont from "@/components/IconFont";
import "./index.css";

const QuickAccessArray = [
  {
    name: "我的简历与面试题",
    src: "recuV81M2OeGcv",
    route: "/resume-interview",
  },
  { name: "日历", src: "recuV83P0hfWEO", route: "/calendar" },
  {
    name: "个人档案",
    src: "recuV81JPXTspn",
    route: "/profile",
  },
  {
    name: "课后作业",
    src: "recuV81LmPLGOM",
    route: "/homework",
  },
];

const QuickAccess = () => {
  const navigate = useNavigate();

  const handleClick = (path) => {
    navigate(path);
  };
  return (
    <div className="module-quick-access-wrapper">
      <p className="module-quick-access-title">
        <IconFont className="title-icon" src="recuUY5mia5pYp" />
        <span>快捷入口</span>
      </p>
      <ul className="module-quick-access-list">
        {QuickAccessArray.map((item, index) => (
          <li
            key={index}
            className="module-quick-access-item"
            onClick={() => handleClick(item.route)}
          >
            <IconFont
              className="module-quick-access-item-icon"
              src={item.src}
            />
            <p className="module-quick-access-item-text">{item.name}</p>
          </li>
        ))}
      </ul>
    </div>
  );
};

export default QuickAccess;