"use client";

import ReactLenis from "lenis/react";
import BlogCardOne from "@/components/sections/blog/BlogCardOne";
import NavbarStyleFullscreen from "@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import { useBlogPosts } from "@/hooks/useBlogPosts";

export default function BlogPage() {
  const { posts, isLoading } = useBlogPosts();
  const navItems = [
    { name: "Home", id: "/" },
    { name: "Blog", id: "/blog" },
    { name: "Shop", id: "/shop" },
  ];

  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">
          <NavbarStyleFullscreen navItems={navItems} />
        </div>
        <div className="min-h-screen bg-gray-50 py-12 px-4">
          <div className="max-w-7xl mx-auto">
            <h1 className="text-4xl font-bold text-gray-900 mb-8">Our Blog</h1>
            {isLoading ? (
              <div className="text-center text-gray-600">Loading blog posts...</div>
            ) : posts && posts.length > 0 ? (
              <BlogCardOne
                posts={posts}
                title="Latest Articles"
                description="Discover insights and stories from our artisanal bakery"
              />
            ) : (
              <div className="text-center text-gray-600">No blog posts available yet.</div>
            )}
          </div>
        </div>
      </ReactLenis>
    </ThemeProvider>
  );
}
