window.BlogRead = ({ theme, post, onBack }) => {
    // Si por algún motivo no hay post, regresamos a la lista
    if (!post) {
        onBack();
        return null;
    }

    return (
        <article className="animate-fade-in max-w-4xl mx-auto px-6 text-inherit text-left pb-20">
            <button onClick={onBack} className="mb-10 flex items-center gap-2 text-[10px] font-black opacity-50 hover:opacity-100 uppercase tracking-widest transition-all">
                <window.Icon name="arrow-left" className="w-4 h-4" /> Volver al Journal
            </button>

            <header className="mb-12">
                <div className="flex items-center gap-4 mb-6">
                    <span className="px-4 py-1 border border-purple-500/30 text-purple-500 rounded-full text-[10px] font-black uppercase tracking-widest">{post.cat}</span>
                    <span className="text-xs opacity-50 font-mono">{post.date}</span>
                </div>
                <h1 className="text-5xl md:text-6xl font-black tracking-tighter mb-6 leading-none uppercase">{post.title}</h1>
                <p className="text-xl opacity-60 font-light leading-relaxed max-w-2xl">{post.excerpt}</p>
            </header>

            <div className="aspect-[21/9] w-full rounded-3xl overflow-hidden mb-16 shadow-2xl border border-white/10">
                <img src={post.img} className="w-full h-full object-cover" alt={post.title} />
            </div>

            <div className="prose prose-lg max-w-none text-inherit opacity-80 leading-relaxed font-light">
                <p>{post.content}</p>
                <div className={`mt-12 p-8 rounded-2xl border ${theme === 'dark' ? 'bg-white/5 border-white/10' : 'bg-slate-50 border-slate-200'}`}>
                    <h4 className="font-bold uppercase tracking-widest text-xs mb-2">Nota del Editor</h4>
                    <p className="text-sm opacity-70">En el futuro, esta sección consumirá datos de un CMS (como Supabase) para renderizar bloques de Markdown, imágenes intercaladas y código de forma dinámica.</p>
                </div>
            </div>
        </article>
    );
};