"use client";

import ReactLenis from "lenis/react";
import { BlogCardTwo } from "import BlogCardTwo from '@/components/sections/blog/BlogCardTwo';";
import FooterBase from "@/components/sections/footer/FooterBase";
import NavbarStyleCentered from "@/components/navbar/NavbarStyleCentered/NavbarStyleCentered";
import BlogCardOne from "@/components/sections/blog/BlogCardOne";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import type { FooterColumn } from "@/components/shared/FooterColumns";

import { useBlogPosts } from "@/hooks/useBlogPosts";

const footerColumns: FooterColumn[] = [
    {
        title: "Product",
        items: [
            { label: "Features", href: "/features" },
            { label: "Pricing", href: "/pricing" },
            { label: "FAQ", href: "/faq" },
        ],
    },
    {
        title: "Company",
        items: [
            { label: "About", href: "/about" },
            { label: "Blog", href: "/blog" },
            { label: "Careers", href: "/careers" },
        ],
    },
    {
        title: "Resources",
        items: [
            { label: "Documentation", href: "/docs" },
            { label: "Support", href: "/support" },
            { label: "Contact", href: "/contact" },
        ],
    },
];

export default function BlogPage() {
    const { posts, isLoading } = useBlogPosts();

    return (
        <ThemeProvider defaultButtonVariant="icon-arrow"
      defaultTextAnimation="background-highlight"
      borderRadius="pill"
      contentWidth="medium"
      sizing="largeSmallSizeLargeTitles"
      background="circleGradient"
      cardStyle="soft-shadow"
      primaryButtonStyle="gradient"
      secondaryButtonStyle="radial-glow"
      headingFontWeight="bold">
            <ReactLenis root>
                <div id="nav" data-section="nav">
        <FooterBase navItems={[
            { name: "Home", id: "hero" },
            { name: "About", id: "about" },
            { name: "Pets", id: "products" },
            { name: "Stories", id: "testimonial" },
            { name: "FAQ", id: "faq" }
          ]}
          button={{
            text: "Adopt Now",            href: "contact"
          }}
          brandName="PawsHome" /><div id="blog" data-section="blog">
        <BlogCardTwo {...blogProps} />
      </div>
      </ThemeProvider>
    );
}

