import React from 'react';
import { Newspaper } from 'lucide-react';
import { useCTF } from './CTFContext';

export const Blog: React.FC = () => {
  const { state } = useCTF();
  return (
    <div className="max-w-4xl mx-auto py-20 px-6">
      <div className="mb-12 border-b-4 border-[#ff0000] pb-6"><h2 className="text-6xl font-black italic text-white uppercase flex items-center gap-4"><Newspaper size={48} className="text-[#ff0000]" /> BLOG_FEED</h2></div>
      <div className="space-y-12">
        {state.blogs.map((post) => (
          <div key={post.id} className="hxp-border-purple bg-white/5 p-8 relative group">
            <div className="absolute top-0 right-0 bg-[#bf00ff] text-black text-[10px] font-black px-4 py-1">{new Date(post.timestamp).toLocaleString()}</div>
            <h3 className="text-3xl font-black text-white italic mb-4">{post.title}</h3>
            <div className="text-slate-400 font-bold text-sm leading-relaxed whitespace-pre-wrap border-l-4 border-[#333] pl-6 py-2">{post.content}</div>
          </div>
        ))}
      </div>
    </div>
  );
};