'use client';

import { usePathname, useRouter } from 'next/navigation';
import {
  LayoutDashboard,
  Users,
  Calendar,
  UserCog,
  FlaskConical,
  FileText,
  CreditCard
} from 'lucide-react';

const menu = [
  { name: 'Today', path: '/today', icon: LayoutDashboard },
  { name: 'Patients', path: '/patients', icon: Users },
  { name: 'Appointments', path: '/appointments', icon: Calendar },
  { name: 'Staff Management', path: '/staff', icon: UserCog },
  { name: 'Lab Management', path: '/lab', icon: FlaskConical },
  { name: 'Billing', path: '/billing', icon: CreditCard },
  { name: 'Reports', path: '/reports', icon: FileText },
];

export default function Sidebar() {
  const pathname = usePathname();
  const router = useRouter();

  return (
    <aside className="w-64 bg-[#071a2f] text-white flex flex-col p-4">
      <div className="mb-8">
        <h1 className="text-xl font-bold">DyoLink</h1>
      </div>

      <nav className="flex flex-col gap-2">
        {menu.map((item) => {
          const Icon = item.icon;
          const isActive = pathname === item.path;

          return (
            <button
              key={item.name}
              onClick={() => router.push(item.path)}
              className={`flex items-center gap-3 p-3 rounded-lg transition ${
                isActive
                  ? 'bg-primary-600'
                  : 'hover:bg-white/10'
              }`}
            >
              <Icon className="w-5 h-5" />
              <span>{item.name}</span>
            </button>
          );
        })}
      </nav>
    </aside>
  );
}