"use client";

import { useState } from "react";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';

export default function SaccoStatementsPage() {
  const [history] = useState([
    { id: "1", date: "2023-10-01", type: "Contribution", amount: "$50.00" },
    { id: "2", date: "2023-09-15", type: "Loan Payment", amount: "$120.00" },
    { id: "3", date: "2023-09-01", type: "Contribution", amount: "$50.00" },
  ]);

  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>
        <main className="container mx-auto py-20 px-6">
          <h1 className="text-4xl font-bold mb-8">Account Statements</h1>
          <div className="grid grid-cols-1 md:grid-cols-2 gap-8 mb-12">
            <div className="p-6 rounded-2xl border bg-card">
              <h2 className="text-xl font-semibold mb-4">Generate Statement</h2>
              <button className="px-6 py-3 rounded-full bg-primary text-white font-medium hover:opacity-90">
                Generate Latest Statement
              </button>
            </div>
            <div className="p-6 rounded-2xl border bg-card">
              <h2 className="text-xl font-semibold mb-4">Download Options</h2>
              <div className="flex gap-4">
                <button className="px-6 py-3 rounded-full border border-primary text-primary hover:bg-primary hover:text-white">PDF Format</button>
                <button className="px-6 py-3 rounded-full border border-primary text-primary hover:bg-primary hover:text-white">CSV Format</button>
              </div>
            </div>
          </div>
          <div className="p-6 rounded-2xl border bg-card">
            <h2 className="text-xl font-semibold mb-6">Statement History</h2>
            <div className="space-y-4">
              {history.map((item) => (
                <div key={item.id} className="flex justify-between items-center p-4 border-b last:border-0">
                  <div>
                    <p className="font-medium">{item.type}</p>
                    <p className="text-sm text-muted-foreground">{item.date}</p>
                  </div>
                  <p className="font-bold">{item.amount}</p>
                </div>
              ))}
            </div>
          </div>
        </main>
        <div id="footer" data-section="footer">
            <FooterLogoEmphasis 
                logoText="BodaFund Sacco" 
                columns={[]} 
            />
        </div>
      </ReactLenis>
    </ThemeProvider>
  );
}