"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
import TextSplitAbout from '@/components/sections/about/TextSplitAbout';
import MetricCardEleven from '@/components/sections/metrics/MetricCardEleven';
import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';

export default function ProfilePage() {
  const navItems = [
    { name: "Community", id: "/community" },
    { name: "Profile", id: "/profile" },
  ];

  const footerColumns = [
    { "items": [] },
    { "items": [] },
    { "items": [ { "label": "Community", "href": "/community" }, { "label": "Profile", "href": "/profile" }, { "label": "Settings", "href": "/settings" } ] },
    { "items": [ { "label": "Privacy Policy", "href": "/privacy" }, { "label": "Terms of Service", "href": "/terms" }, { "label": "Contact Us", "href": "/contact" } ] }
  ];

  return (
    <ThemeProvider
      defaultButtonVariant="elastic-effect"
      defaultTextAnimation="background-highlight"
      borderRadius="pill"
      contentWidth="mediumLarge"
      sizing="large"
      background="noiseDiagonalGradient"
      cardStyle="glass-elevated"
      primaryButtonStyle="primary-glow"
      secondaryButtonStyle="layered"
      headingFontWeight="extrabold"
    >
      <div id="nav" data-section="nav">
        <NavbarStyleCentered
          brandName="Creator Quest RPG"
          logoSrc="http://img.b2bpic.net/free-vector/gradient-metaverse-concept-labels_23-2149516151.jpg"
          logoAlt="creator quest logo gamified"
          navItems={navItems}
          button={{ text: "Sign Up", href: "/register" }}
        />
      </div>

      <div id="profile-about" data-section="profile-about">
        <TextSplitAbout
          title="Your Creator Identity"
          description={[
            "Your profile is a reflection of your creator journey. Customize your avatar, update your personal bio, and showcase your unique style to the Creator Quest community.",
            "This is where your legend lives. Track your progress, display your hard-earned achievement badges, and connect your social media to sync your real-world growth.",
          ]}
          useInvertedBackground={false}
          buttons={[
            {
              text: "Edit Profile",
              href: "/profile/edit",
            },
          ]}
        />
      </div>

      <div id="profile-metrics" data-section="profile-metrics">
        <MetricCardEleven
          animationType="slide-up"
          title="Personal Creator Stats"
          description="A comprehensive look at your growth, levels, and reward points."
          textboxLayout="default"
          useInvertedBackground={true}
          metrics={[
            {
              id: "p_m1",
              value: "Level 35",
              title: "Current Creator Level",
              description: "Progress towards Level 100.",
              imageSrc: "http://img.b2bpic.net/free-photo/8-bits-swords-gaming-assets_23-2151143790.jpg",
            },
            {
              id: "p_m2",
              value: "1.2M",
              title: "Total Virtual Followers",
              description: "Your combined platform audience.",
              imageSrc: "http://img.b2bpic.net/free-photo/female-artist-explaining-painting-techniques-used-online-tutorial_482257-118488.jpg",
            },
            {
              id: "p_m3",
              value: "1500",
              title: "Reward Points Earned",
              description: "Ready to be exchanged for rewards!",
              imageSrc: "http://img.b2bpic.net/free-vector/cashback-colourful-labels-isolated-white_23-2148450091.jpg",
            },
          ]}
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterLogoEmphasis
          logoSrc="http://img.b2bpic.net/free-vector/gradient-metaverse-concept-labels_23-2149516151.jpg"
          logoAlt="creator quest logo gamified"
          logoText="Creator Quest RPG"
          columns={footerColumns}
          useInvertedBackground={true}
        />
      </div>
    </ThemeProvider>
  );
}