"use client";

import { motion } from "framer-motion";
import { ArrowRight, Calendar, User } from "lucide-react";

export default function BlogSection({ dict, blogs }: { dict: any, blogs?: any[] }) {
  const defaultPosts = [
    {
      id: "1",
      title: "The Importance of Hard Drive Destruction for Corporate Security",
      excerpt: "Why simple formatting is never enough when it comes to sensitive enterprise data.",
      date: "May 24, 2026",
      category: "Data Security",
      image: "https://images.unsplash.com/photo-1563206767-5b18f218e8de?q=80&w=800&auto=format&fit=crop"
    },
    {
      id: "2",
      title: "NSA Requirements for Classified Document Shredding",
      excerpt: "Understanding the P-7 security level and compliance for military operations.",
      date: "May 12, 2026",
      category: "Compliance",
      image: "https://images.unsplash.com/photo-1618044733300-9472054094ee?q=80&w=800&auto=format&fit=crop"
    },
    {
      id: "3",
      title: "Industrial Recycling: Turning Cardboard Waste into Profit",
      excerpt: "How our cardboard shredders help logistics centers reduce waste costs.",
      date: "Apr 28, 2026",
      category: "Recycling",
      image: "https://images.unsplash.com/photo-1605600659873-d808a1d14b0b?q=80&w=800&auto=format&fit=crop"
    }
  ];

  let posts = defaultPosts;
  if (blogs && blogs.length > 0) {
    posts = blogs.map(b => ({
      id: b.id,
      title: b.title,
      excerpt: b.content.substring(0, 100) + "...",
      date: new Date(b.createdAt).toLocaleDateString(),
      category: "Article",
      image: b.image || "https://images.unsplash.com/photo-1563206767-5b18f218e8de?q=80&w=800&auto=format&fit=crop"
    }));
  } else if (dict.blogSection?.posts) {
    posts = defaultPosts.map((p, i) => ({...p, title: dict.blogSection.posts[i]?.title || p.title, excerpt: dict.blogSection.posts[i]?.excerpt || p.excerpt, category: dict.blogSection.posts[i]?.category || p.category}));
  }

  return (
    <section id="blog" className="py-24 bg-card">
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        
        <div className="flex flex-col md:flex-row md:items-end justify-between mb-16 gap-6">
          <motion.div 
            initial={{ opacity: 0, x: -30 }}
            whileInView={{ opacity: 1, x: 0 }}
            viewport={{ once: true }}
            className="max-w-2xl"
          >
            <div className="flex items-center gap-2 mb-4">
              <div className="w-8 h-1 bg-brand-accent"></div>
              <span className="text-sm font-bold tracking-widest text-brand-accent uppercase">
                {dict.blogSection?.title || 'Insights & Resources'}
              </span>
            </div>
            <h2 className="text-4xl md:text-5xl font-black text-foreground">
              LATEST <span className="text-gray-500">ARTICLES</span>
            </h2>
          </motion.div>
          <motion.a 
            initial={{ opacity: 0, x: 30 }}
            whileInView={{ opacity: 1, x: 0 }}
            viewport={{ once: true }}
            href="#all-articles"
            className="group flex items-center gap-2 text-sm font-bold text-brand-accent hover:text-brand-accent/80 transition-colors"
          >
            VIEW ALL ARTICLES
            <ArrowRight className="w-4 h-4 group-hover:translate-x-1 transition-transform" />
          </motion.a>
        </div>

        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
          {posts.map((post, index) => (
            <motion.div
              key={post.id}
              initial={{ opacity: 0, y: 30 }}
              whileInView={{ opacity: 1, y: 0 }}
              viewport={{ once: true }}
              transition={{ delay: index * 0.1, duration: 0.5 }}
              className="group bg-background border border-border/50 rounded-xl overflow-hidden hover:shadow-xl transition-all duration-300"
            >
              <div className="relative h-56 overflow-hidden">
                <div className="absolute top-4 left-4 bg-brand-accent text-white text-xs font-bold px-3 py-1 rounded-sm z-10">
                  {post.category}
                </div>
                <img 
                  src={post.image} 
                  alt={post.title} 
                  className="w-full h-full object-cover group-hover:scale-110 transition-transform duration-500"
                />
              </div>
              <div className="p-6">
                <div className="flex items-center gap-4 text-xs text-gray-400 mb-4 font-medium">
                  <div className="flex items-center gap-1">
                    <Calendar className="w-4 h-4" /> {post.date}
                  </div>
                </div>
                <h3 className="text-xl font-bold text-foreground mb-3 leading-snug group-hover:text-brand-accent transition-colors">
                  {post.title}
                </h3>
                <p className="text-gray-500 text-sm mb-6 line-clamp-2">
                  {post.excerpt}
                </p>
                <a href="#" className="inline-flex items-center gap-2 text-sm font-bold text-brand-black hover:text-brand-accent transition-colors">
                  READ ARTICLE <ArrowRight className="w-4 h-4" />
                </a>
              </div>
            </motion.div>
          ))}
        </div>

      </div>
    </section>
  );
}
