/**
 * @license
 * SPDX-License-Identifier: Apache-2.0
 */

import { useState } from 'react';
import { ClassicTrivia } from './components/ClassicTrivia';
import { LiveTrivia } from './components/LiveTrivia';
import { Brain, Mic } from 'lucide-react';

export default function App() {
  const [mode, setMode] = useState<'classic' | 'live'>('classic');

  return (
    <div className="min-h-screen bg-slate-950 text-slate-50 font-sans selection:bg-indigo-500/30">
      <header className="border-b border-slate-800 bg-slate-900/50 backdrop-blur-md sticky top-0 z-10">
        <div className="max-w-5xl mx-auto px-4 h-16 flex items-center justify-between">
          <div className="flex items-center gap-2">
            <div className="w-8 h-8 rounded-lg bg-indigo-500 flex items-center justify-center">
              <Brain className="w-5 h-5 text-white" />
            </div>
            <h1 className="text-xl font-bold tracking-tight">TriviAI</h1>
          </div>
          <nav className="flex gap-2">
            <button
              onClick={() => setMode('classic')}
              className={`px-4 py-2 rounded-full text-sm font-medium transition-colors ${
                mode === 'classic' ? 'bg-indigo-500 text-white' : 'text-slate-400 hover:text-slate-200 hover:bg-slate-800'
              }`}
            >
              Classic Mode
            </button>
            <button
              onClick={() => setMode('live')}
              className={`px-4 py-2 rounded-full text-sm font-medium transition-colors flex items-center gap-2 ${
                mode === 'live' ? 'bg-emerald-500 text-white' : 'text-slate-400 hover:text-slate-200 hover:bg-slate-800'
              }`}
            >
              <Mic className="w-4 h-4" />
              Live Voice
            </button>
          </nav>
        </div>
      </header>

      <main className="max-w-5xl mx-auto px-4 py-8">
        {mode === 'classic' ? <ClassicTrivia /> : <LiveTrivia />}
      </main>
    </div>
  );
}