"use client"
import { LoanHistory } from "../../components/loan/LoanHistory";
import { LoanOverview } from "../../components/loan/LoanOverview";
import { LoanTitle } from "../../components/loan/LoanTitle";
import { useAuth } from "../../context/AuthContext";

export default function Loan() {
  const { userLoanSummary } = useAuth();

  return (
    <main className="p-4 sm:p-6 lg:p-8 bg-white min-h-screen">
      <LoanTitle />
         <LoanOverview
          title="Loans"
          amount= {userLoanSummary?.totalRepaymentAmount}
          bgColor="bg-gradient-to-br from-[#8E48A0] to-[#8E48A0]"
          textColor="text-pink-100"
          growth="+9.56%"
      />
        <LoanHistory
          transactionHeader="Loan History"
          transactionDescription="This is an overview of your loan activities"
        /> 
    </main>
  );
}