'use client';

import { useState } from 'react';
import Pagination from '@/components/layout/pagination';

import Image from 'next/image';
import Link from 'next/link';
import { getPosts } from '@/services/blog';
import { IPostCardProps } from '@/app/api/blog/data';

export interface IPostsGridProps {
  initialPosts: IPostCardProps[];
  initialPagination: {
    currentPage: number;
    totalPages: number;
    totalItems: number;
    limit: number;
  };
}

export default function PostsGrid({
  initialPosts,
  initialPagination,
}: IPostsGridProps) {
  const [posts, setPosts] = useState(initialPosts);
  const [pagination, setPagination] = useState(initialPagination);

  const fetchPage = (page: number) => {
    getPosts(page)
      .then((res) => {
        setPosts(res.data);
        setPagination(res.pagination);
      })
      .catch((error) => {
        console.error('Failed to fetch posts:', error);
      });
  };

  return (
    <div className="container mx-auto px-4 py-14 md:py-28">
      <div className="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3">
        {posts.map((post) => (
          <div key={post.id} className="overflow-hidden bg-white">
            <div className="relative aspect-[1.09] w-full overflow-hidden rounded-4xl">
              <Image
                src={post.imageSrc}
                alt={post.title}
                fill
                className="h-auto w-full object-cover"
              />
            </div>
            <div className="py-7">
              <h2 className="mb-5 text-xl font-semibold">{post.title}</h2>
              <a
                href={post.link}
                className="text-primary text-base hover:underline"
              >
                Read More →
              </a>
            </div>
          </div>
        ))}
      </div>
      <Pagination {...pagination} onPageChange={fetchPage} />
    </div>
  );
}
