'use client';

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

interface Props {
  post: BlogPost;
  slug: string;
}

export default function PostContent({ post, slug }: Props) {
  return (
    <div className={styles.main}>
      <div className={styles.hero}>
        <div className={styles.heroBg}>
          <Image src={post.img} alt={post.title} fill className={styles.bgImg} priority />
          <div className={styles.heroOverlay}></div>
        </div>
        
        <div className={styles.container}>
          <motion.div 
            className={styles.heroContent}
            initial={{ opacity: 0, y: 30 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.8 }}
          >
            <Link href="/blog" className={styles.backBtn}>
                <ChevronLeft size={16} /> BACK TO HUB
            </Link>
            <div className={styles.meta}>
                <span className={styles.date}><Calendar size={14} /> {post.date}</span>
                <span className={styles.author}><User size={14} /> {post.author}</span>
                <span className={styles.readTime}><Clock size={14} /> 5 MIN READ</span>
            </div>
            <h1 className={styles.title}>{post.title}</h1>
            <p className={styles.desc}>{post.desc}</p>
          </motion.div>
        </div>
      </div>

      <section className={styles.contentSection}>
        <div className={styles.container}>
          <div className={styles.contentGrid}>
            <motion.div 
                className={styles.articleBody}
                initial={{ opacity: 0 }}
                animate={{ opacity: 1 }}
                transition={{ delay: 0.4 }}
            >
              <div 
                className={styles.formattedText}
                dangerouslySetInnerHTML={{ __html: post.content.replace(/\n/g, '<br/>') }}
              />
            </motion.div>
            
            <aside className={styles.sidebar}>
               <div className={styles.sidebarBox}>
                  <h3>TECHNICAL SPECS</h3>
                  <div className={styles.specItem}>
                     <span>VERSION</span>
                     <strong>V4.5.6-STABLE</strong>
                  </div>
                  <div className={styles.specItem}>
                     <span>PLATFORM</span>
                     <strong>HONDA K-SERIES</strong>
                  </div>
                  <div className={styles.specItem}>
                     <span>ENCRYPTION</span>
                     <strong>AES-256 BIT</strong>
                  </div>
               </div>
               
               <div className={styles.relatedBox}>
                  <h3>LATEST UPDATES</h3>
                  {blogPosts.filter(p => p.slug !== slug).map((p, i) => (
                    <Link key={i} href={`/blog/${p.slug}`} className={styles.relatedLink}>
                       {p.title}
                       <ChevronLeft size={12} style={{ transform: 'rotate(180deg)' }} />
                    </Link>
                  ))}
               </div>
            </aside>
          </div>
        </div>
      </section>
    </div>
  );
}
