import React from "react";
import Vector1 from "../assets/icons/Vector1.svg";
import Vector2 from "../assets/icons/Vector2.svg";
import Vector3 from "../assets/icons/Vector3.svg";
import Vector4 from "../assets/icons/Vector4.svg";
import Vector5 from "../assets/icons/Vector5.svg";
import Vector6 from "../assets/icons/Vector6.svg";
import LogoDM from "../assets/icons/LogoDM.svg";
import { Link } from "react-router-dom";
import { BiBarChartAlt2 } from "react-icons/bi";
import { AiOutlinePieChart } from "react-icons/ai";
import { PiCoffee } from "react-icons/pi";
import { LuSquareUser } from "react-icons/lu";
import { HiOutlineLogout } from "react-icons/hi";

const Sidebar = () => {
  return (
    <aside
      dir="rtl"
      className="fixed right-0 top-0 z-50 flex h-screen w-[220px] flex-col bg-[#EFEEEE] rounded-tl-3xl rounded-bl-3xl shadow-xl border-l border-[#D9CAB3]"
    >
      <div className="flex justify-center mt-6">
        <img src={LogoDM} className="h-12 w-12" alt="Logo" />
      </div>

      <nav className="w-[85%] mr-4 mt-8 space-y-4">
        {/* داشبورد */}
        <Link
          // to="/"
          className="group relative flex items-center gap-3 rounded-xl p-3 transition-all duration-300 hover:bg-[#7F4629] hover:shadow-md"
        >
          <BiBarChartAlt2 className="w-6 h-6 text-[#402E32] transition-colors group-hover:text-white" />
          <span className="text-[#402E32] font-medium transition-colors group-hover:text-white">
            داشبورد
          </span>
        </Link>

        {/* مدیریت کافه‌ها */}
        <Link
          // to="/management1"
          className="group flex items-center gap-3 rounded-xl p-3 transition-all duration-300 hover:bg-[#7F4629] hover:shadow-md"
        >
          <PiCoffee className="w-6 h-6 text-[#402E32] transition-colors group-hover:text-white" />
          <span className="text-[#402E32] font-medium transition-colors group-hover:text-white">
            مدیریت کافه ها
          </span>
        </Link>

        {/* مدیریت کاربران */}
        <Link
          // to="/users"
          className="group flex items-center gap-3 rounded-xl p-3 transition-all duration-300 hover:bg-[#7F4629] hover:shadow-md"
        >
          <LuSquareUser className="w-6 h-6 text-[#402E32] transition-colors group-hover:text-white" />
          <span className="text-[#402E32] font-medium transition-colors group-hover:text-white">
            مدیریت کاربران
          </span>
        </Link>

        {/* آمار و تحلیل */}
        <Link
          // to="/stats"
          className="group flex items-center gap-3 rounded-xl p-3 transition-all duration-300 hover:bg-[#7F4629] hover:shadow-md"
        >
          <AiOutlinePieChart className="w-6 h-6 text-[#402E32] transition-colors group-hover:text-white" />
          <span className="text-[#402E32] font-medium transition-colors group-hover:text-white">
            آمار و تحلیل
          </span>
        </Link>

        {/* خروج */}
        <Link
          // to="/logout"
          className="group flex items-center gap-3 rounded-xl p-3 transition-all duration-300 hover:bg-[#7F4629] hover:shadow-md mt-18"
        >
          <HiOutlineLogout className="w-6 h-6 text-[#402E32] transition-colors group-hover:text-white" />
          <span className="text-[#402E32] font-medium transition-colors group-hover:text-white">
            خروج
          </span>
        </Link>
      </nav>
    </aside>
  );
};

export default Sidebar;
