"use client"

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
import MetricCardTwo from '@/components/sections/metrics/MetricCardTwo';
import FeatureCardSixteen from '@/components/sections/feature/FeatureCardSixteen';
import ContactText from '@/components/sections/contact/ContactText';
import FooterLogoReveal from '@/components/sections/footer/FooterLogoReveal';
import { TrendingUp } from "lucide-react";

export default function DashboardPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="slide-background"
      defaultTextAnimation="entrance-slide"
      borderRadius="soft"
      contentWidth="medium"
      sizing="mediumSizeLargeTitles"
      background="floatingGradient"
      cardStyle="soft-shadow"
      primaryButtonStyle="primary-glow"
      secondaryButtonStyle="radial-glow"
      headingFontWeight="bold"
    >
      <div id="nav" data-section="nav">
        <NavbarStyleCentered
          navItems={[
            { name: "Dashboard", id: "dashboard" },
            { name: "Analytics", id: "analytics" },
            { name: "Reports", id: "reports" },
            { name: "Settings", id: "settings" },
            { name: "Help", id: "help" }
          ]}
          button={{ text: "Get Started", href: "dashboard" }}
          brandName="Dashboard"
        />
      </div>

      <div id="stats" data-section="stats">
        <MetricCardTwo
          title="Dashboard Metrics"
          description="Key performance indicators and real-time statistics"
          metrics={[
            { id: "1", value: "2,847", description: "Total Users" },
            { id: "2", value: "$64,230", description: "Revenue This Month" },
            { id: "3", value: "12.5%", description: "Growth Rate" },
            { id: "4", value: "342", description: "Active Sessions" }
          ]}
          gridVariant="uniform-all-items-equal"
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground="noInvert"
          tag="Real-time Data"
          tagIcon={TrendingUp}
        />
      </div>

      <div id="charts" data-section="charts">
        <FeatureCardSixteen
          title="Analytics Overview"
          description="Visual representation of key metrics and performance trends across your dashboard"
          negativeCard={{
            items: [
              "Missing real-time updates",              "Limited data filtering",              "Static chart displays",              "No custom date ranges"
            ]
          }}
          positiveCard={{
            items: [
              "Live data streaming",              "Advanced filtering options",              "Interactive charts",              "Customizable time periods"
            ]
          }}
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground="invertDefault"
        />
      </div>

      <div id="contact" data-section="contact">
        <ContactText
          text="Ready to explore your dashboard? Start tracking your metrics and gain actionable insights in real-time."
          animationType="entrance-slide"
          buttons={[
            { text: "Launch Dashboard", href: "dashboard" },
            { text: "View Demo", href: "help" }
          ]}
          background={{ variant: "plain" }}
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterLogoReveal
          logoText="Dashboard"
          leftLink={{ text: "Privacy Policy", href: "privacy" }}
          rightLink={{ text: "Terms of Service", href: "terms" }}
        />
      </div>
    </ThemeProvider>
  );
}