import AppPageHeader from "@/components/AppPageHeader";
import React, {useState} from "react";
import MainLayout from "@/layouts/MainLayout";
import Documents from "./partials/Documents";
import Efiling from "./partials/Efiling";

export default function Index(): JSX.Element {
    // This page delegates listing/search/pagination to `ClientProfile`.

    const tabs = [
        { key: 'documents', label: 'Documents' },
        { key: 'efiling', label: 'E-Filing' },
    ];

    const [activeTab, setActiveTab] = useState<string>('documents');

    const renderActive = () => {
        if (activeTab === 'documents') return <Documents />;
        if (activeTab === 'efiling') return <Efiling />;
        return null;
    };

    return (
        <MainLayout>
            <AppPageHeader title="Manage Documents" subtitle="Listing" />

            <div className="bg-white rounded-lg shadow mb-6">
                <div className="px-4">
                    <nav className="flex space-x-4 overflow-x-auto" aria-label="Client tabs">
                        {tabs.map(tab => (
                            <button
                                key={tab.key}
                                onClick={() => setActiveTab(tab.key)}
                                className={`py-4 px-4  border-b-2 ${activeTab === tab.key ? 'border-indigo-600 text-indigo-600' : 'border-transparent text-gray-600 hover:text-gray-800'}`}
                            >
                                {tab.label}
                            </button>
                        ))}
                    </nav>
                </div>
            </div>

            {renderActive()}
        </MainLayout>
    );
}