'use client';

import { motion } from 'framer-motion';
import Image from 'next/image';
import Link from 'next/link';
import { Calendar, User, ArrowRight } from 'lucide-react';
import { blogPosts } from '@/lib/blog';
import styles from './Blog.module.css';

export default function Blog() {
  return (
    <section className={styles.section}>
      <div className={styles.container}>
        <div className={styles.header}>
           <div className={styles.left}>
              <span className={styles.label}>LATEST NEWS</span>
              <h2 className={styles.title}>ENGINEERING HUB</h2>
           </div>
        </div>
        
        <div className={styles.grid}>
           {blogPosts.map((item, i) => (
             <motion.div 
               key={i} 
               className={styles.card}
               initial={{ y: 30, opacity: 0 }}
               whileInView={{ y: 0, opacity: 1 }}
               viewport={{ once: true }}
               transition={{ delay: i * 0.15 }}
             >
                <Link href={`/blog/${item.slug}`} className={styles.imageBox}>
                   <Image src={item.img} alt={item.title} fill className={styles.blogImg} />
                </Link>
                <div className={styles.content}>
                   <div className={styles.meta}>
                      <div className={styles.metaItem}>
                         <Calendar size={14} className={styles.redIcon} />
                         <span>{item.date}</span>
                      </div>
                      <div className={styles.metaItem}>
                         <User size={14} className={styles.redIcon} />
                         <span>{item.author}</span>
                      </div>
                   </div>
                   <Link href={`/blog/${item.slug}`}>
                    <h3 className={styles.postTitle}>{item.title}</h3>
                   </Link>
                   <p>{item.desc}</p>
                   <Link href={`/blog/${item.slug}`} className={styles.readBtn}>
                      READ ARTICLE <ArrowRight size={16} />
                   </Link>
                </div>
             </motion.div>
           ))}
        </div>
      </div>
    </section>
  );
}
