"use client";

import { useState } from "react";
import type { BlogPost } from "@/lib/blog";
import BlogCard from "./BlogCard";
import ScrollReveal from "./ScrollReveal";

export default function BlogList({ posts }: { posts: BlogPost[] }) {
  const [filter, setFilter] = useState<"all" | "blog" | "case-study">("all");

  const filteredPosts = filter === "all" ? posts : posts.filter((p) => p.category === filter);

  return (
    <div>
      {/* Filter Tabs */}
      <div className="flex justify-center gap-4 mb-12">
        <button
          onClick={() => setFilter("all")}
          className={`px-6 py-3 rounded-full font-medium transition-all ${
            filter === "all"
              ? "bg-cyan-600 text-white shadow-lg shadow-cyan-500/30"
              : "bg-gray-800 text-gray-400 hover:bg-gray-700"
          }`}
        >
          Wszystkie ({posts.length})
        </button>
        <button
          onClick={() => setFilter("blog")}
          className={`px-6 py-3 rounded-full font-medium transition-all ${
            filter === "blog"
              ? "bg-cyan-600 text-white shadow-lg shadow-cyan-500/30"
              : "bg-gray-800 text-gray-400 hover:bg-gray-700"
          }`}
        >
          Blog ({posts.filter((p) => p.category === "blog").length})
        </button>
        <button
          onClick={() => setFilter("case-study")}
          className={`px-6 py-3 rounded-full font-medium transition-all ${
            filter === "case-study"
              ? "bg-cyan-600 text-white shadow-lg shadow-cyan-500/30"
              : "bg-gray-800 text-gray-400 hover:bg-gray-700"
          }`}
        >
          Case Studies ({posts.filter((p) => p.category === "case-study").length})
        </button>
      </div>

      {/* Posts Grid */}
      {filteredPosts.length === 0 ? (
        <div className="text-center py-20">
          <p className="text-gray-500 text-lg">Brak postów w tej kategorii</p>
        </div>
      ) : (
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
          {filteredPosts.map((post, i) => (
            <ScrollReveal key={post.slug} delay={i * 100}>
              <BlogCard post={post} />
            </ScrollReveal>
          ))}
        </div>
      )}
    </div>
  );
}