/**
 * Sidebar.tsx
 *
 * @author Descomplicar® Crescimento Digital
 * @link https://descomplicar.pt
 * @copyright 2025 Descomplicar®
 */


import React from 'react';
import { DashboardIcon } from './icons/DashboardIcon';
import { SettingsIcon } from './icons/SettingsIcon';
import { AccountIcon } from './icons/AccountIcon';
import { HelpIcon } from './icons/HelpIcon';

interface SidebarProps {
  activeView: string;
  setActiveView: (view: string) => void;
}

const Sidebar: React.FC<SidebarProps> = ({ activeView, setActiveView }) => {
    
    const navItems = [
        { id: 'dashboard', name: 'Dashboard', icon: <DashboardIcon className="w-5 h-5" /> },
        { id: 'contas', name: 'Contas', icon: <AccountIcon className="w-5 h-5" /> },
        { id: 'configuracoes', name: 'Configurações', icon: <SettingsIcon className="w-5 h-5" /> },
        { id: 'ajuda', name: 'Ajuda', icon: <HelpIcon className="w-5 h-5" /> },
    ];

    return (
        <aside className="w-64 bg-white dark:bg-slate-800/50 p-4 border-r border-slate-200 dark:border-slate-700 hidden md:block">
            <nav className="flex flex-col gap-2">
                {navItems.map(item => (
                    <a
                        key={item.id}
                        href="#"
                        onClick={(e) => {
                            e.preventDefault();
                            setActiveView(item.id);
                        }}
                        className={`flex items-center gap-3 px-4 py-2.5 rounded-lg text-sm font-medium transition-colors ${
                            activeView === item.id
                                ? 'bg-sky-500 text-white'
                                : 'text-slate-600 dark:text-slate-300 hover:bg-slate-100 dark:hover:bg-slate-700'
                        }`}
                    >
                        {item.icon}
                        <span>{item.name}</span>
                    </a>
                ))}
            </nav>
        </aside>
    );
};

export default Sidebar;