import Link from "next/link";
import Image from "next/image";
import { ArrowRight, Calendar } from "lucide-react";
import { SectionHeading } from "../common/SectionHeading";
import { getLatestPosts } from "@/content/posts";

export function BlogPreview() {
  const latestPosts = getLatestPosts(3);

  const formatDate = (dateStr: string) => {
    const d = new Date(dateStr);
    return d.toLocaleDateString("pl-PL", {
      year: "numeric",
      month: "long",
      day: "numeric",
    });
  };

  const getCategoryLabel = (cat: string) => {
    const labels: Record<string, string> = {
      klimatyzacja: "Klimatyzacja",
      "pompy-ciepla": "Pompy ciepła",
      porady: "Porady ogólne",
    };
    return labels[cat] || cat;
  };

  return (
    <section className="py-16 md:py-24 bg-white">
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <SectionHeading
          eyebrow="Aktualności"
          title="Najnowsze poradniki i artykuły"
          subtitle="Dzielimy się wiedzą i doświadczeniem. Zobacz nasze wpisy dotyczące klimatyzacji i pomp ciepła oraz oszczędzania energii."
          align="center"
        />

        {/* Blog Posts Grid */}
        <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
          {latestPosts.map((post) => (
            <article
              key={post.slug}
              className="group flex flex-col justify-between border border-border rounded-xl overflow-hidden hover:shadow-md transition-shadow h-full"
            >
              <div>
                {/* Thumbnail */}
                <div className="relative aspect-video bg-slate-50 border-b border-border">
                  <Image
                    src={post.image}
                    alt={post.title}
                    fill
                    className="object-cover"
                    sizes="(max-width: 768px) 100vw, 33vw"
                  />
                </div>

                {/* Content */}
                <div className="p-6">
                  {/* Category & Date */}
                  <div className="flex items-center gap-4 text-xs text-text-muted mb-3">
                    <span className="font-semibold uppercase tracking-wider text-accent">
                      {getCategoryLabel(post.category)}
                    </span>
                    <span className="flex items-center gap-1">
                      <Calendar className="size-3.5" />
                      <span>{formatDate(post.date)}</span>
                    </span>
                  </div>

                  {/* Title */}
                  <h3 className="text-lg font-bold text-primary font-heading line-clamp-2 leading-snug group-hover:text-accent transition-colors">
                    <Link href={`/blog/${post.slug}`}>{post.title}</Link>
                  </h3>

                  {/* Excerpt */}
                  <p className="text-sm text-text-muted mt-3 line-clamp-2 leading-relaxed">
                    {post.excerpt}
                  </p>
                </div>
              </div>

              {/* Read More Link */}
              <div className="p-6 pt-0 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="size-4 group-hover:translate-x-1 transition-transform" />
                </Link>
              </div>
            </article>
          ))}
        </div>

        {/* Blog Catalog Button */}
        <div className="flex justify-center mt-12">
          <Link href="/blog" className="btn btn-outline btn-primary bg-white font-bold flex items-center gap-2 group">

              <span>Przejdź do bloga</span>
              <ArrowRight className="size-4 group-hover:translate-x-1 transition-transform" />
            
</Link>
        </div>
      </div>
    </section>
  );
}