"use client";

import ReactLenis from "lenis/react";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import { useBlogPosts } from "@/hooks/useBlogPosts";
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
import BlogCardTwo from '@/components/sections/blog/BlogCardTwo';
import FooterCard from '@/components/sections/footer/FooterCard';

export default function BlogPage() {
    const { posts, isLoading } = useBlogPosts();
    const navItems = [
        { name: 'Home', id: '/' },
        { name: 'Services', id: '/services' },
        { name: 'About', id: '/about' },
        { name: 'Reviews', id: '/reviews' },
        { name: 'Contact', id: '/contact' }
    ];

    return (
        <ThemeProvider
            defaultButtonVariant="bounce-effect"
            defaultTextAnimation="reveal-blur"
            borderRadius="pill"
            contentWidth="smallMedium"
            sizing="mediumLargeSizeLargeTitles"
            background="none"
            cardStyle="gradient-radial"
            primaryButtonStyle="primary-glow"
            secondaryButtonStyle="glass"
            headingFontWeight="bold"
        >
            <ReactLenis root>
                <div id="nav" data-section="nav">
                  <NavbarStyleCentered
                      brandName="Nick and Sons Plumbing"
                      navItems={navItems}
                      button={{ text: "Call Now", href: "tel:123-456-7890" }}
                      className="py-4 lg:py-6"
                  />
                </div>

                {isLoading ? (
                    <div className="w-content-width mx-auto py-20 text-center">
                        <p className="text-foreground">Loading posts...</p>
                    </div>
                ) : (
                    <BlogCardTwo
                        blogs={posts}
                        title="Our Plumbing Insights"
                        description="Stay informed with the latest news, tips, and articles from the experts at Nick and Sons Plumbing."
                        animationType="slide-up"
                        textboxLayout="default"
                        useInvertedBackground={false}
                    />
                )}

                <FooterCard
                    logoText="Nick and Sons Plumbing"
                    copyrightText="© 2024 | Nick and Sons Plumbing. All rights reserved."
                    className="py-16"
                    cardClassName="max-w-7xl mx-auto px-6 lg:px-8 bg-card rounded-xl shadow-lg"
                    logoClassName="text-3xl font-bold text-foreground"
                    copyrightTextClassName="text-sm text-foreground/70"
                />
            </ReactLenis>
        </ThemeProvider>
    );
}
