thermcool/components/sections/PostsGrid.tsx

"use client";

import React, { useState } from 'react';
import Link from 'next/link';
import Image from 'next/image';
import { Post } from '@/types/types';
import { cn } from '@/lib/utils';
import { Calendar, ArrowRight, ChevronLeft, ChevronRight } from 'lucide-react';
import { FeaturedPost } from '@/components/sections/FeaturedPost';

interface PostsGridProps {
  posts: Post[];
  featuredPost?: Post;
}

const POSTS_PER_PAGE = 6;

const categories = [
  { id: 'wszystkie', label: 'Wszystkie' },
  { id: 'klimatyzacja', label: 'Klimatyzacja' },
  { id: 'pompy-ciepla', label: 'Pompy ciepła' },
  { id: 'porady', label: 'Porady' },
];

export function PostsGrid({ posts, featuredPost }: PostsGridProps) {
  const [activeCategory, setActiveCategory] = useState('wszystkie');
  const [currentPage, setCurrentPage] = useState(1);

  const filteredPosts = posts.filter(
    (post) => activeCategory === 'wszystkie' || post.category === activeCategory
  );

  const totalPages = Math.ceil(filteredPosts.length / POSTS_PER_PAGE);
  const startIndex = (currentPage - 1) * POSTS_PER_PAGE;
  const visiblePosts = filteredPosts.slice(startIndex, startIndex + POSTS_PER_PAGE);

  const handleCategoryChange = (categoryId: string) => {
    setActiveCategory(categoryId);
    setCurrentPage(1); // Reset paginacji przy zmianie kategorii
  };

  const categoryLabels: Record<string, string> = {
    'klimatyzacja': 'Klimatyzacja',
    'pompy-ciepla': 'Pompy Ciepła',
    'porady': 'Porady'
  };

  return (
    <div className="py-12">
      {/* Artykuł Wyróżniony (tylko na 1 stronie) */}
      {featuredPost && currentPage === 1 && (
        <div className="mb-16">
          <h2 className="text-2xl font-bold text-primary font-heading mb-8">Artykuł wyróżniony</h2>
          <FeaturedPost post={featuredPost} />
        </div>
      )}

      {/* Filtry */}
      <div className="flex flex-wrap items-center gap-3 mb-12">
        {categories.map((category) => (
          <button
            key={category.id}
            onClick={() => handleCategoryChange(category.id)}
            className={cn(
              "px-4 py-2 rounded-full text-sm font-semibold transition-all duration-300 border",
              activeCategory === category.id
                ? "bg-primary text-white border-primary shadow-md"
                : "bg-white text-text-muted border-border hover:border-primary/30 hover:text-primary"
            )}
          >
            {category.label}
          </button>
        ))}
      </div>

      {/* Siatka Artykułów */}
      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
        {visiblePosts.map((post) => {
          const dateObj = new Date(post.date);
          const formattedDate = dateObj.toLocaleDateString('pl-PL', {
            day: 'numeric', month: 'long', year: 'numeric'
          });

          return (
            <article 
              key={post.slug} 
              className="group flex flex-col bg-white rounded-2xl overflow-hidden border border-border hover:shadow-lg transition-all duration-300"
            >
              <Link href={`/blog/${post.slug}`} className="relative aspect-[16/10] overflow-hidden">
                <Image
                  src={post.image || 'https://images.unsplash.com/photo-1516321318423-f06f85e504b3?w=800&q=80'}
                  alt={post.title}
                  fill
                  className="object-cover transition-transform duration-700 group-hover:scale-105"
                />
                <div className="absolute top-4 left-4">
                  <span className="px-3 py-1 bg-accent text-white text-[10px] font-bold rounded-full uppercase tracking-wider shadow-sm">
                    {categoryLabels[post.category] || post.category}
                  </span>
                </div>
              </Link>
              
              <div className="flex flex-col flex-grow p-6 md:p-8">
                <div className="flex items-center gap-2 text-xs font-medium text-text-muted mb-3">
                  <Calendar className="w-3.5 h-3.5 text-primary/50" />
                  <span>{formattedDate}</span>
                </div>
                
                <h3 className="text-xl font-bold text-primary font-heading leading-snug mb-3 group-hover:text-accent transition-colors">
                  <Link href={`/blog/${post.slug}`}>
                    {post.title}
                  </Link>
                </h3>
                
                <p className="text-sm text-text-muted leading-relaxed line-clamp-3 mb-6 flex-grow">
                  {post.excerpt}
                </p>
                
                <div className="mt-auto">
                  <Link 
                    href={`/blog/${post.slug}`}
                    className="inline-flex items-center gap-1.5 text-sm font-semibold text-primary group-hover:text-accent transition-colors"
                  >
                    <span>Czytaj więcej</span>
                    <ArrowRight className="w-4 h-4 group-hover:translate-x-1 transition-transform" />
                  </Link>
                </div>
              </div>
            </article>
          );
        })}
      </div>

      {visiblePosts.length === 0 && (
        <div className="text-center py-16 bg-slate-50 rounded-2xl border border-border">
          <p className="text-lg text-text-muted font-medium">Brak artykułów w tej kategorii.</p>
        </div>
      )}

      {/* Paginacja */}
      {totalPages > 1 && (
        <div className="mt-12 flex flex-wrap justify-center items-center gap-2">
          <button
            onClick={() => setCurrentPage(p => Math.max(1, p - 1))}
            disabled={currentPage === 1}
            className="w-10 h-10 flex items-center justify-center rounded-lg border border-border text-text-muted disabled:opacity-50 disabled:cursor-not-allowed hover:bg-slate-50 transition-colors"
            aria-label="Poprzednia strona"
          >
            <ChevronLeft className="w-5 h-5" />
          </button>
          
          {Array.from({ length: totalPages }).map((_, i) => {
            const pageNum = i + 1;
            // Prosta logika dla mniejszych ekranów (opcjonalnie można ukrywać strony w środku, ale flex-wrap sobie poradzi)
            return (
              <button
                key={i}
                onClick={() => {
                  setCurrentPage(pageNum);
                  // Opcjonalnie: skroluj na górę po zmianie strony
                  window.scrollTo({ top: 0, behavior: 'smooth' });
                }}
                className={cn(
                  "w-10 h-10 flex items-center justify-center rounded-lg border transition-all duration-300 font-semibold",
                  currentPage === pageNum 
                    ? "bg-primary text-white border-primary shadow-md" 
                    : "bg-white text-text-muted border-border hover:border-primary/30 hover:text-primary"
                )}
              >
                {pageNum}
              </button>
            )
          })}
          
          <button
            onClick={() => setCurrentPage(p => Math.min(totalPages, p + 1))}
            disabled={currentPage === totalPages}
            className="w-10 h-10 flex items-center justify-center rounded-lg border border-border text-text-muted disabled:opacity-50 disabled:cursor-not-allowed hover:bg-slate-50 transition-colors"
            aria-label="Następna strona"
          >
            <ChevronRight className="w-5 h-5" />
          </button>
        </div>
      )}
    </div>
  );
}