import { Badge } from "@/components/ui/badge"
import { Button } from "@/components/ui/button"
import { BlogCard } from "@/components/blog-card"
import { ArrowRight } from "lucide-react"
import Link from "next/link"
import { Animate } from "@/components/animations/animate"
import { Stagger } from "@/components/animations/stagger"
import blogPosts from "@/data/blog"

export function BlogSection() {
  if (!blogPosts.length) return <></>;

  return (
    <section className="w-full py-12 md:py-24 lg:py-32 bg-white dark:bg-gray-950" id="blog">
      <div className="container px-4 md:px-6 mx-auto">
        <div className="flex flex-col items-center justify-center space-y-4 text-center">
          <div className="space-y-2">
            <Animate animation="fadeInUp" delay={0.1}>
              <h2 className="text-3xl font-bold tracking-tighter sm:text-5xl text-primary-900 dark:text-primary-400">
                Blog
              </h2>
            </Animate>
            <Animate animation="fadeInUp" delay={0.2}>
              <p className="max-w-[900px] text-gray-500 dark:text-gray-400 md:text-xl/relaxed lg:text-base/relaxed xl:text-xl/relaxed">
              Resta aggiornato con i nostri ultimi post su tecnologia, sviluppo e trend d'industria.
              </p>
            </Animate>
          </div>
        </div>
        <Stagger className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 mt-16" delay={0.3}>
          {blogPosts.slice(0, 6).map((post) => (
            <BlogCard key={post.slug} post={post} />
          ))}
        </Stagger>
        
        <Animate animation="fadeInUp" delay={0.6} className="flex justify-center mt-12">
          <Link href="/blog">
            <Button className="bg-primary-900 hover:bg-primary-800 dark:bg-primary-700 dark:hover:bg-primary-600">
              Tutti i post
              <ArrowRight className="ml-2 h-4 w-4" />
            </Button>
          </Link>
        </Animate>
      </div>
    </section>
  )
}