import React, { useState } from 'react';
import { FaUser, FaHandsHelping, FaGavel } from 'react-icons/fa';
import { UserDemo } from './components/UserDemo';
import { NGODemo } from './components/NGODemo';
import { AdvocateDemo } from './components/AdvocateDemo';

interface Tab {
  id: string;
  label: string;
  icon: React.ReactNode;
  component: React.ReactNode;
}

const tabs: Tab[] = [
  {
    id: 'user',
    label: 'User Flow',
    icon: <FaUser />,
    component: <UserDemo />,
  },
  {
    id: 'ngo',
    label: 'NGO Worker Flow',
    icon: <FaHandsHelping />,
    component: <NGODemo />,
  },
  {
    id: 'advocate',
    label: 'Advocate Flow',
    icon: <FaGavel />,
    component: <AdvocateDemo />,
  },
];

export default function App() {
  const [activeTab, setActiveTab] = useState(tabs[0].id);

  return (
    <div className="min-h-screen bg-gray-50 p-8">
      <div className="mx-auto max-w-7xl">
        <h1 className="mb-8 text-center text-3xl font-bold text-gray-900">
          Legal Chat Demo
        </h1>

        <div className="mb-8">
          <div className="border-b border-gray-200">
            <nav className="-mb-px flex space-x-8" aria-label="Tabs">
              {tabs.map((tab) => (
                <button
                  key={tab.id}
                  onClick={() => setActiveTab(tab.id)}
                  className={`
                    flex items-center gap-2 border-b-2 px-1 py-4 text-sm font-medium
                    ${
                      activeTab === tab.id
                        ? 'border-blue-500 text-blue-600'
                        : 'border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700'
                    }
                  `}
                >
                  {tab.icon}
                  {tab.label}
                </button>
              ))}
            </nav>
          </div>
        </div>

        <div className="rounded-lg bg-white p-6 shadow-sm">
          {tabs.find((tab) => tab.id === activeTab)?.component}
        </div>
      </div>
    </div>
  );
}