import React from 'react';

interface SidebarProps { currentPage: string; onNavigate: (page: any) => void; }

const nav = [
  { id: 'dashboard', label: 'Home' },
  { id: 'voice',     label: 'Voice AI' },
  { id: 'send',      label: 'Send' },
  { id: 'scan',      label: 'Scan & Pay' },
  { id: 'contacts',  label: 'Contacts' },
  { id: 'history',   label: 'Transactions' },
  { id: 'security',  label: 'Security' },
  { id: 'settings',  label: 'Settings' },
];

export default function Sidebar({ currentPage, onNavigate }: SidebarProps) {
  return (
    <aside className="w-[200px] flex flex-col bg-canvas border-r border-hairline">
      {/* Wordmark */}
      <div className="px-5 pt-6 pb-5">
        <div className="flex items-center gap-2">
          <div className="w-7 h-7 rounded-full bg-primary flex items-center justify-center">
            <span className="text-on-primary text-caption-strong font-bold">SV</span>
          </div>
          <span className="text-title-md text-ink">SolVox</span>
        </div>
      </div>

      <div className="hairline-soft mx-5" />

      {/* Nav Links */}
      <nav className="flex-1 px-3 py-4 space-y-0.5">
        {nav.map(item => (
          <button key={item.id} onClick={() => onNavigate(item.id)}
            className={`w-full text-left px-3 py-2.5 rounded-lg text-nav-link transition-colors ${
              currentPage === item.id
                ? 'text-primary bg-primary/[0.06] font-semibold'
                : 'text-body hover:text-ink hover:bg-surface-soft'
            }`}>
            {item.label}
          </button>
        ))}
      </nav>

      {/* QVAC Status */}
      <div className="px-4 pb-4">
        <div className="bg-surface-soft rounded-xl p-3">
          <div className="text-caption-strong text-muted uppercase tracking-wider mb-1.5">QVAC Engine</div>
          <div className="flex items-center gap-1.5 flex-wrap">
            {['LLM', 'STT', 'TTS', 'EMB', 'NMT', 'OCR'].map(m => (
              <span key={m} className="badge-pill text-[10px] py-0">{m}</span>
            ))}
          </div>
          <div className="flex items-center gap-1.5 mt-2">
            <div className="w-1.5 h-1.5 rounded-full bg-semantic-up" />
            <span className="text-caption text-muted">100% local</span>
          </div>
        </div>
      </div>
    </aside>
  );
}