"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
import MetricCardFourteen from '@/components/sections/metrics/MetricCardFourteen';

export default function LoanBalancesPage() {
  return (
    <ThemeProvider>
      <ReactLenis root>
        <NavbarLayoutFloatingOverlay
            navItems={[
              { name: "Home", id: "/" },
              { name: "Loan Balances", id: "/loan-balances" },
              { name: "Products", id: "products" },
              { name: "Pricing", id: "pricing" },
              { name: "FAQ", id: "faq" },
            ]}
            brandName="BodaFund Sacco"
        />
        <div className="pt-32 pb-20 px-6 max-w-7xl mx-auto">
            <MetricCardFourteen
                title="Your Loan Overview"
                tag="Active Loan"
                metrics={[
                    { id: "bal", value: "$850", description: "Current Outstanding Balance" },
                    { id: "repay", value: "$50", description: "Monthly Repayment" },
                    { id: "due", value: "15th", description: "Next Due Date" }
                ]}
            />
        </div>
      </ReactLenis>
    </ThemeProvider>
  );
}