import React, { useState } from 'react';
import { Tabs, Tab } from './components/Tabs';
import { UserDemo } from './components/UserDemo';
import { NGODemo } from './components/NGODemo';
import { AdvocateDemo } from './components/AdvocateDemo';
import { FaUser, FaUsers, FaBalanceScale } from 'react-icons/fa';

export default function App() {
  const [activeTab, setActiveTab] = useState('user');

  return (
    <div className="min-h-screen bg-gray-50">
      <header className="bg-white shadow-sm">
        <div className="mx-auto max-w-7xl px-4 py-4">
          <h1 className="text-2xl font-bold text-gray-900">Legal Chat Demo</h1>
        </div>
      </header>

      <main className="mx-auto max-w-7xl p-4">
        <Tabs value={activeTab} onChange={setActiveTab}>
          <Tab id="user" icon={FaUser} label="User Flow">
            <UserDemo />
          </Tab>
          <Tab id="ngo" icon={FaUsers} label="NGO Worker Flow">
            <NGODemo />
          </Tab>
          <Tab id="advocate" icon={FaBalanceScale} label="Advocate Flow">
            <AdvocateDemo />
          </Tab>
        </Tabs>
      </main>
    </div>
  );
}