"use client";
import Banner from "@/components/banner";
import { AuthorCard } from "@/components/ui/content-card";
import { Pagination } from "@/components/ui/pagination";
import { BlogPost, getPaginatedBlogPosts } from "@/data/blogs";
import Link from "next/link";
import React, { useState } from "react";

const Page = () => {
  const [currentPage, setCurrentPage] = useState(1);
  const { posts, totalPages } = getPaginatedBlogPosts(currentPage);

  const handlePageChange = (page: number) => {
    setCurrentPage(page);
    // Scroll to top of the posts section
    document
      .getElementById("posts-section")
      ?.scrollIntoView({ behavior: "smooth" });
  };

  return (
    <>
      <Banner imageSrc="/images/photo3.jpg" height={400}>
        <div className="text-center text-white">
          <h1 className="text-5xl font-bold mb-4">Our Blog</h1>
          <p className="text-xl text-white/80">
            Stay updated with the latest industry insights and news
          </p>
        </div>
      </Banner>

      <section id="posts-section" className="py-16 bg-white">
        <div className="container max-w-7xl mx-auto px-4">
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
            {posts.map((post: BlogPost) => (
              <Link
                href={`/blogs/${post.id}`}
                key={post.id}
                className="transition-transform hover:scale-105"
              >
                <AuthorCard
                  backgroundImage={post.backgroundImage}
                  author={{
                    name: post.author.name,
                    avatar: post.author.avatar,
                    readTime: post.author.date,
                  }}
                  content={{
                    title: post.title,
                    description: post.description,
                  }}
                />
              </Link>
            ))}
          </div>

          <div className="mt-12">
            <Pagination
              currentPage={currentPage}
              totalPages={totalPages}
              onPageChange={handlePageChange}
            />
          </div>
        </div>
      </section>
    </>
  );
};

export default Page;