"use client";

import { Suspense } from "react";
import { TransactionsTable } from "@/components/banking";
import { Card, CardContent } from "@/components/ui/card";
import { Skeleton } from "@/components/ui/skeleton";

function TransactionsTableSkeleton() {
    return (
        <Card>
            <CardContent className="p-6">
                <div className="space-y-4">
                    <div className="flex items-center justify-between">
                        <Skeleton className="h-8 w-48" />
                        <Skeleton className="h-8 w-32" />
                    </div>
                    <div className="space-y-2">
                        {Array.from({ length: 8 }).map((_, i) => (
                            <Skeleton key={i} className="h-12 w-full" />
                        ))}
                    </div>
                </div>
            </CardContent>
        </Card>
    );
}

export default function TransactionsPage() {
    return (
        <div className="container mx-auto space-y-6 p-6">
            <div>
                <h1 className="text-3xl font-bold">Transactions Bancaires</h1>
                <p className="text-muted-foreground">
                    Historique et gestion de toutes les transactions bancaires
                </p>
            </div>

            <Suspense fallback={<TransactionsTableSkeleton />}>
                <TransactionsTable
                    transactions={[]}
                    loading={false}
                    onCreateTransaction={() => { }}
                    onViewTransaction={() => { }}
                    onEditTransaction={() => { }}
                    onRefresh={() => { }}
                    onExport={() => { }}
                />
            </Suspense>
        </div>
    );
}