"use client";

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 ProfilePage() {
  return (
    <ThemeProvider
        defaultButtonVariant="bounce-effect"
        defaultTextAnimation="background-highlight"
        borderRadius="rounded"
        contentWidth="smallMedium"
        sizing="largeSmallSizeLargeTitles"
        background="blurBottom"
        cardStyle="layered-gradient"
        primaryButtonStyle="flat"
        secondaryButtonStyle="glass"
        headingFontWeight="semibold"
    >
      <ReactLenis root>
        <div id="nav" data-section="nav">
            <NavbarLayoutFloatingOverlay
            brandName="GourmetAgency"
            navItems={[
                { name: "Home", id: "/" },
                { name: "Dashboard", id: "/dashboard" },
                { name: "Profile", id: "/profile" }
            ]}
            />
        </div>

        <main className="container mx-auto px-6 py-24 min-h-screen">
            <h1 className="text-4xl font-bold mb-8">Account Settings</h1>
            <div className="max-w-2xl bg-card p-8 rounded-2xl border border-border">
                <div className="space-y-6">
                    <div>
                        <label className="block text-sm font-medium mb-2">Display Name</label>
                        <input type="text" className="w-full p-3 rounded-lg border border-border bg-background" defaultValue="John Doe" />
                    </div>
                    <div>
                        <label className="block text-sm font-medium mb-2">Email Address</label>
                        <input type="email" className="w-full p-3 rounded-lg border border-border bg-background" defaultValue="john@example.com" />
                    </div>
                    <button className="px-6 py-3 bg-primary text-white rounded-lg">Save Changes</button>
                </div>
            </div>
        </main>

        <div id="footer" data-section="footer">
            <FooterLogoEmphasis
            logoText="GourmetAgency"
            columns={[
                { items: [{ label: "Dashboard" }, { label: "Settings" }, { label: "Support" }] },
                { items: [{ label: "Privacy Policy" }, { label: "Terms of Service" }] }
            ]}
            />
        </div>
      </ReactLenis>
    </ThemeProvider>
  );
}