"use client";
import React, { useState } from "react";
import Link from "next/link";
import Image from "next/image";
import { useTheme } from "../context/ThemeContext";

const Sidebar = () => {
  const [showFormsSubmenu, setShowFormsSubmenu] = useState(false);
  const { darkMode } = useTheme();

  return (
    <aside className={`w-[290px] h-full border-r flex flex-col ${darkMode ? 'bg-gray-900 border-gray-800' : 'bg-white border-gray-200'
      }`}>
      {/* Logo */}
      <div className="py-8 flex justify-start">
        <Link href="/">
          <Image
            src={darkMode ? "/images/logo/logo-dark.svg" : "/images/logo/logo.svg"}
            alt="Logo"
            width={150}
            height={40}
          />
        </Link>
      </div>

      {/* Navigation */}
      <div className="flex flex-col overflow-y-auto no-scrollbar">
        <nav className="mb-6">
          <div className="flex flex-col gap-4">
            <h2 className="mb-4 text-xs uppercase leading-[20px] text-gray-400 dark:text-gray-500">
              Menu
            </h2>

            {/* Dashboard */}
            <div>
              <Link
                href="/pages/dashboard"
                className={`flex items-center w-full p-2 rounded-lg ${darkMode
                    ? 'text-gray-300 hover:text-white hover:bg-gray-800'
                    : 'text-gray-600 hover:text-brand-500 hover:bg-gray-100'
                  }`}
              >
                <img
                  src="/images/icons/grid.svg"
                  alt="Dashboard"
                  className={`w-5 h-5 mr-3 ${darkMode ? 'filter invert' : ''}`}
                />
                <span className="flex-1 text-left">Dashboard</span>
              </Link>
            </div>

            {/* -------------table01 page--------------- */}
            <Link
              href="/pages/table01"
              className={`flex items-center w-full p-2 rounded-lg ${darkMode
                  ? 'text-gray-300 hover:text-white hover:bg-gray-800'
                  : 'text-gray-600 hover:text-brand-500 hover:bg-gray-100'
                }`}
            >
              <img
                src="/file.svg"
                alt="table01"
                className={`w-5 h-5 mr-3 ${darkMode ? 'filter invert' : ''}`}
              />
              <span className="flex-1 text-left">table01</span>
            </Link>
            {/* ---------------TemporaryTable-------------- */}
            <Link
              href="/pages/register-employee"
              className={`flex items-center w-full p-2 rounded-lg ${darkMode
                  ? 'text-gray-300 hover:text-white hover:bg-gray-800'
                  : 'text-gray-600 hover:text-brand-500 hover:bg-gray-100'
                }`}
            >
              <img
                src="/file.svg"
                alt="register employee"
                className={`w-5 h-5 mr-3 ${darkMode ? 'filter invert' : ''}`}
              />
              <span className="flex-1 text-left">register employee</span>
            </Link>
            {/* --------------register employee--------- */}
            <Link
              href="/pages/TemporaryTable"
              className={`flex items-center w-full p-2 rounded-lg ${darkMode
                  ? 'text-gray-300 hover:text-white hover:bg-gray-800'
                  : 'text-gray-600 hover:text-brand-500 hover:bg-gray-100'
                }`}
            >
              <img
                src="/file.svg"
                alt="TemporaryTable"
                className={`w-5 h-5 mr-3 ${darkMode ? 'filter invert' : ''}`}
              />
              <span className="flex-1 text-left">TemporaryTable</span>
            </Link>
            {/* ----------------------- */}
            {/* ----------Trainees Data------------- */}
            <Link
              href="/pages/TraineesData"
              className={`flex items-center w-full p-2 rounded-lg ${darkMode
                  ? 'text-gray-300 hover:text-white hover:bg-gray-800'
                  : 'text-gray-600 hover:text-brand-500 hover:bg-gray-100'
                }`}
            >
              <img
                src="/file.svg"
                alt="TraineesData"
                className={`w-5 h-5 mr-3 ${darkMode ? 'filter invert' : ''}`}
              />
              <span className="flex-1 text-left">Trainees Data</span>
            </Link>
            {/* ----------------------- */}
          </div>
        </nav>
      </div>
    </aside>
  );
};

export default Sidebar;