"use client"

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
import HeroBillboardDashboard from '@/components/sections/hero/HeroBillboardDashboard';
import FooterBaseReveal from '@/components/sections/footer/FooterBaseReveal';
import { BarChart3, Grid, LayoutDashboard, LineChart, TrendingUp, Settings, DollarSign, AlertCircle, CheckCircle, Clock } from "lucide-react";

export default function DashboardPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="text-stagger"
      defaultTextAnimation="reveal-blur"
      borderRadius="sharp"
      contentWidth="smallMedium"
      sizing="largeSmall"
      background="circleGradient"
      cardStyle="gradient-radial"
      primaryButtonStyle="shadow"
      secondaryButtonStyle="glass"
      headingFontWeight="medium"
    >
      <div id="nav" data-section="nav">
        <NavbarStyleApple
          navItems={[
            { name: "Dashboard", id: "hero" },
            { name: "Analytics", id: "#" },
            { name: "Reports", id: "#" },
            { name: "Settings", id: "#" }
          ]}
          brandName="DashBoard"
        />
      </div>

      <div id="hero" data-section="hero">
        <HeroBillboardDashboard
          title="Real-Time Dashboard Analytics"
          description="Monitor your business metrics, track performance indicators, and visualize data trends with an intuitive dashboard interface."
          tag="Analytics Hub"
          tagIcon={BarChart3}
          background={{ variant: "radial-gradient" }}
          buttons={[
            { text: "Export Report", href: "#" },
            { text: "View Documentation", href: "#" }
          ]}
          dashboard={{
            title: "Live Metrics Dashboard",            logoIcon: Grid,
            imageSrc: "https://img.b2bpic.net/free-vector/dashboard-user-panel-template_52683-29391.jpg",            imageAlt: "Dashboard interface preview",            searchPlaceholder: "Search metrics...",            buttons: [
              { text: "Refresh", href: "#" },
              { text: "Download", href: "#" }
            ],
            sidebarItems: [
              { icon: LayoutDashboard, active: true },
              { icon: BarChart3 },
              { icon: LineChart },
              { icon: TrendingUp },
              { icon: Settings }
            ],
            stats: [
              {
                title: "Total Revenue",                values: [45200, 67890, 89450],
                valuePrefix: "$",                description: "Monthly recurring"
              },
              {
                title: "Active Users",                values: [1240, 2890, 4560],
                description: "Unique visitors"
              },
              {
                title: "Conversion Rate",                values: [3.2, 4.7, 6.1],
                valueSuffix: "%",                description: "From visitor to customer"
              }
            ],
            chartTitle: "Revenue Trend",            chartData: [
              { value: 65 },
              { value: 45 },
              { value: 78 },
              { value: 52 },
              { value: 88 },
              { value: 42 },
              { value: 95 }
            ],
            listTitle: "Recent Transactions",            listItems: [
              { icon: DollarSign, title: "$12,500 Subscription", status: "Completed" },
              { icon: TrendingUp, title: "Revenue Spike Detected", status: "Confirmed" },
              { icon: AlertCircle, title: "System Update Required", status: "Pending" },
              { icon: CheckCircle, title: "Integration Successful", status: "Completed" },
              { icon: Clock, title: "Scheduled Maintenance", status: "Scheduled" }
            ]
          }}
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterBaseReveal
          columns={[
            {
              title: "Product",              items: [
                { label: "Features", href: "#" },
                { label: "Pricing", href: "#" },
                { label: "Dashboard", href: "hero" }
              ]
            },
            {
              title: "Company",              items: [
                { label: "About", href: "#" },
                { label: "Blog", href: "#" },
                { label: "Careers", href: "#" }
              ]
            },
            {
              title: "Resources",              items: [
                { label: "Documentation", href: "#" },
                { label: "API Docs", href: "#" },
                { label: "Support", href: "#" }
              ]
            }
          ]}
          copyrightText="© 2025 DashBoard Analytics. All rights reserved."
        />
      </div>
    </ThemeProvider>
  );
}