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

const Sidebar = () => {
  const [showDashboardSubmenu, setShowDashboardSubmenu] = useState(false);
  const [showFormsSubmenu, setShowFormsSubmenu] = useState(false);

  return (
<aside className="w-[290px] h-full bg-white border-r border-gray-200 flex flex-col">
        {/* Logo */}
      <div className="py-8 flex justify-start">
        <Link href="/">
          <Image
            src="/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">
              Menu
            </h2>

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

            {/* Tables (simple link) */}
            <div>
              <Link
                href="/tables"
                className="flex items-center w-full p-2 text-gray-600 hover:text-brand-500 hover:bg-gray-100 rounded-lg"
              >
                <img src="/images/icons/table.svg" alt="Tables" className="w-5 h-5 mr-3" />
                <span>Tables</span>
              </Link>
            </div>

            {/* Forms with submenu */}
            <div>
              <button
                onClick={() => setShowFormsSubmenu(!showFormsSubmenu)}
                className="flex items-center w-full p-2 text-gray-600 hover:text-brand-500 hover:bg-gray-100 rounded-lg"
              >
                <img src="/images/icons/list.svg" alt="Forms" className="w-5 h-5 mr-3" />
                <span className="flex-1 text-left">Forms</span>
              </button>
              {showFormsSubmenu && (
                <ul className="mt-2 space-y-1 ml-9">
                  <li>
                    <Link
                      href="/forms"
                      className="block p-2 text-gray-600 hover:text-brand-500 rounded-lg"
                    >
                      Basic Form
                    </Link>
                  </li>
                </ul>
              )}
            </div>
          </div>
        </nav>
      </div>
    </aside>
  );
};

export default Sidebar;