import {
  FileClock,
  Gauge,
  RadioTower,
  Settings,
  Shield,
  Wrench,
} from 'lucide-react';

const items = [
  ['Dashboard', Gauge],
  ['UDP2RAW Config', RadioTower],
  ['Provisioning', Wrench],
  ['Activity Logs', FileClock],
  ['Workstation', Settings],
] as const;

type SidebarProps = {
  active: string;
  onSelect: (value: string) => void;
};

export function Sidebar({
  active,
  onSelect,
}: SidebarProps) {
  return (
    <aside className="flex h-screen w-64 flex-col border-r border-white/10 bg-ink-950 px-4 py-5">
      <div className="mb-8 flex items-center gap-3">
        <div className="rounded-2xl bg-blue-500/15 p-3 text-blue-300">
          <Shield />
        </div>

        <div>
          <h1 className="font-bold text-white">
            Litoral Regas
          </h1>

          <p className="text-xs text-slate-400">
            VPN Orchestrator
          </p>
        </div>
      </div>

      <nav className="space-y-1">
        {items.map(([label, Icon]) => {
          const isActive = active === label;

          return (
            <button
              key={label}
              type="button"
              onClick={() => onSelect(label)}
              className={`flex w-full items-center gap-3 rounded-xl px-3 py-3 text-left text-sm font-medium transition ${
                isActive
                  ? 'bg-blue-500/15 text-blue-200'
                  : 'text-slate-300 hover:bg-white/5 hover:text-white'
              }`}
            >
              <Icon size={18} />
              {label}
            </button>
          );
        })}
      </nav>

      <div className="mt-auto rounded-2xl border border-white/10 bg-white/[0.03] p-4">
        <div className="flex items-center gap-2 text-sm text-green-300">
          <span className="h-2 w-2 rounded-full bg-green-400" />
          Backend connected
        </div>

        <p className="mt-2 text-xs text-slate-400">
          localhost:8080
        </p>

        <div className="mt-5 border-t border-white/10 pt-4 text-xs text-slate-500">
          Version 1.0.0
        </div>
      </div>
    </aside>
  );
}