/**
 * Dashboard Sidebar Component
 * @description Vertical navigation sidebar with icons
 */

import { Home, Settings } from 'lucide-react';

/**
 * Sidebar component
 * @description Left sidebar navigation with icon menu
 * @returns Sidebar element
 */
export function Sidebar() {
    return (
        <aside className="fixed left-6 top-24 bottom-6 w-16 bg-gradient-to-b from-[#00A1A0] to-[#00166D] flex flex-col items-center py-6 gap-6 z-50 rounded-2xl shadow-xl">
            {/* Navigation Icons */}
            <nav className="flex flex-col items-center gap-5 flex-1 w-full">
                {/* Home - Active State */}
                <button className="w-[42px] h-[42px] bg-white/20 rounded-xl flex items-center justify-center text-white shadow-inner transition-all hover:bg-white/30" aria-label="Home">
                    <Home className="w-5 h-5 text-white" />
                </button>

                <button className="sidebar-icon-v3" aria-label="Agent">
                    <img src="/Agent.svg" alt="Agent" className="w-[42px] h-[42px] " />
                </button>
                <button className="sidebar-icon-v3" aria-label="KB">
                    <img src="/KB.svg" alt="KB" className="w-[42px] h-[42px] " />
                </button>
                <button className="sidebar-icon-v3" aria-label="Models">
                    <img src="/Models.svg" alt="Models" className="w-[42px] h-[42px] " />
                </button>
                <button className="sidebar-icon-v3" aria-label="Workflow">
                    <img src="/Workflow.svg" alt="Workflow" className="w-[42px] h-[42px] " />
                </button>
                <button className="sidebar-icon-v3" aria-label="Nav Item">
                    <img src="/Nav item.svg" alt="Nav Item" className="w-[42px] h-[42px] " />
                </button>
                <button className="sidebar-icon-v3" aria-label="LLM">
                    <img src="/LLM.svg" alt="LLM" className="w-[42px] h-[42px] " />
                </button>
                <button className="sidebar-icon-v3" aria-label="FT">
                    <img src="/FT.svg" alt="FT" className="w-[42px] h-[42px] " />
                </button>
                <button className="sidebar-icon-v3" aria-label="Task Watcher">
                    <img src="/Task watacher.svg" alt="Task Watcher" className="w-[42px] h-[42px] " />
                </button>
                <button className="sidebar-icon-v3" aria-label="Optimization">
                    <img src="/Optimization.svg" alt="Optimization" className="w-[42px] h-[42px] " />
                </button>
            </nav>

            {/* Bottom Icon */}
            <div className="flex flex-col gap-4 mt-auto">
                <button className="sidebar-icon-v3" aria-label="Settings">
                    <Settings className="w-5 h-5 text-white" />
                </button>
            </div>
        </aside>
    );
}
