"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 defaultButtonVariant="text-stagger" defaultTextAnimation="entrance-slide" borderRadius="rounded" contentWidth="medium" sizing="medium" background="circleGradient" cardStyle="glass-elevated" primaryButtonStyle="gradient" secondaryButtonStyle="glass" headingFontWeight="normal">
      <ReactLenis root>
        <div id="nav" data-section="nav">
            <NavbarLayoutFloatingOverlay
                navItems={[
                  { name: "Home", id: "/" },
                  { name: "Loan Balances", id: "/loan-balances" },
                  { name: "Statements", id: "/statements" }
                ]}
                brandName="BodaFund Sacco"
            />
        </div>
        <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" }
                ]}
                useInvertedBackground={false}
            />
        </div>
      </ReactLenis>
    </ThemeProvider>
  );
}