"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 MetricCardSeven from '@/components/sections/metrics/MetricCardSeven';
import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';

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

    return (
        <ThemeProvider
            defaultButtonVariant="expand-hover"
            defaultTextAnimation="reveal-blur"
            borderRadius="soft"
            contentWidth="mediumSmall"
            sizing="mediumLargeSizeMediumTitles"
            background="floatingGradient"
            cardStyle="glass-elevated"
            primaryButtonStyle="flat"
            secondaryButtonStyle="radial-glow"
            headingFontWeight="semibold"
        >
            <ReactLenis root>
                <div id="nav" data-section="nav">
                    <NavbarStyleCentered
                        brandName="Omaha Plumbers"
                        navItems={[
                            { name: "Home", id: "/" },
                            { name: "Services", id: "/services" },
                            { name: "About Us", id: "/about" },
                            { name: "Contact", id: "/contact" },
                        ]}
                        button={{ text: "Call Now", href: "tel:+14028881234" }}
                    />
                </div>

                {isLoading ? (
                    <div className="w-content-width mx-auto py-20 text-center">
                        <p className="text-foreground">Loading posts...</p>
                    </div>
                ) : (
                    <div id="blog" data-section="blog">
                        <MetricCardSeven
                            title="From Our Blog"
                            description="Stay up-to-date with the latest plumbing tips, tricks, and company news."
                            metrics={posts.map((post: any) => ({
                                id: post.slug || post.id,
                                title: post.title,
                                value: post.date ? new Date(post.date).toLocaleDateString('en-US', { month: 'short', day: 'numeric' }) : 'New',
                                items: post.excerpt ? [post.excerpt] : [],
                            }))}
                            animationType="slide-up"
                            textboxLayout="default"
                            useInvertedBackground={false}
                        />
                    </div>
                )}

                <div id="footer" data-section="footer">
                    <FooterBaseCard
                        logoText="Omaha Emergency Plumbers"
                        columns={[
                            {
                                title: "Services",                                items: [
                                    { label: "Water Heater Repair", href: "/services#water-heater" },
                                    { label: "Drain Cleaning", href: "/services#drain-cleaning" },
                                    { label: "Leak Repair", href: "/services#leak-repair" },
                                    { label: "Emergency Plumbing", href: "/services#emergency" },
                                ],
                            },
                            {
                                title: "Company",                                items: [
                                    { label: "About Us", href: "/about" },
                                    { label: "Contact Us", href: "/contact" },
                                    { label: "Reviews", href: "/reviews" },
                                ],
                            },
                            {
                                title: "Contact",                                items: [
                                    { label: "Call Us: (402) 888-1234", href: "tel:+14028881234" },
                                    { label: "Email Us", href: "mailto:info@omahaplumbers.com" },
                                    { label: "Location", href: "https://maps.app.goo.gl/YourGoogleMapsLinkHere" },
                                ],
                            },
                        ]}
                        copyrightText="© 2024 | Omaha Emergency Neighborhood Plumbers. All rights reserved."
                    />
                </div>
            </ReactLenis>
        </ThemeProvider>
    );
}
