/**
 * @license
 * SPDX-License-Identifier: Apache-2.0
 */

import React from 'react';
import {
  LayoutDashboard,
  Store,
  Layers,
  ShoppingBag,
  Users,
  Settings
} from 'lucide-react';
import { MainSection } from '../types';

interface SidebarProps {
  currentSection: MainSection;
  setCurrentSection: (section: MainSection) => void;
  isCoimbatoreView: boolean;
  setIsCoimbatoreView: (val: boolean) => void;
  isOpen: boolean;
}

export default function Sidebar({
  currentSection,
  setCurrentSection,
  isCoimbatoreView,
  setIsCoimbatoreView,
  isOpen
}: SidebarProps) {
  // Navigation elements
  const navItems = [
    { id: 'dashboard' as MainSection, label: 'Dashboard', icon: LayoutDashboard },
    { id: 'stores' as MainSection, label: 'Stores', icon: Store },
    { id: 'inventory' as MainSection, label: 'Inventory Catalog', icon: Layers },
    { id: 'users' as MainSection, label: 'Users', icon: Users },
    { id: 'settings' as MainSection, label: 'Settings', icon: Settings }
  ];

  return (
    <aside
      className={`fixed left-0 top-0 h-screen bg-[#581c87] border-r border-[#4c1d95] text-white flex-col py-xl pt-24 z-40 hidden md:flex transition-all duration-300 ${
        isOpen ? 'w-64' : 'w-20'
      }`}
    >
      {/* Main Navigation Sidebar Links */}
      <nav className="flex-1 space-y-1 overflow-y-auto px-xs">
        {navItems.map((item) => {
          const IconComponent = item.icon;
          const isActive = currentSection === item.id;
          return (
            <button
              key={item.id}
              onClick={() => setCurrentSection(item.id)}
              title={item.label}
              className={`w-full flex items-center py-3 rounded-lg text-left transition-all duration-200 cursor-pointer ${
                isOpen ? 'gap-md px-md' : 'justify-center px-0'
              } ${
                isActive
                  ? 'bg-purple-800 text-white font-semibold' + (isOpen ? ' border-l-4 border-white' : '')
                  : 'text-purple-200 hover:bg-purple-800/60 hover:text-white'
              }`}
            >
              <IconComponent size={18} className={isActive ? 'text-white' : 'text-purple-300'} />
              {isOpen && <span className="font-sans text-sm font-medium">{item.label}</span>}
            </button>
          );
        })}
      </nav>
    </aside>
  );
}