import React from 'react';
import { FileText } from 'lucide-react';

interface BlogPostEditorProps {
  slug?: string;
  anchorId?: string;
}

export function BlogPostEditor({ slug, anchorId }: BlogPostEditorProps) {
  return (
    <section className="w-full py-8 bg-gray-50/50 border-y border-dashed border-gray-200" id={anchorId || undefined}>
      <div className="container max-w-4xl mx-auto px-4">
        <div className="bg-white rounded-xl shadow-sm border border-gray-200 p-8 text-center flex flex-col items-center justify-center min-h-[300px]">
          <div className="w-16 h-16 bg-blue-50 text-blue-500 rounded-full flex items-center justify-center mb-4">
            <FileText size={32} />
          </div>
          <h2 className="text-xl font-bold text-gray-900 mb-2">
            Blog Post Embedded
          </h2>
          {slug ? (
            <p className="text-gray-500 bg-gray-100 px-4 py-1 rounded-full text-sm font-mono mt-2">
              slug: {slug}
            </p>
          ) : (
            <p className="text-red-500 bg-red-50 px-4 py-1 rounded-full text-sm font-medium mt-2">
              Please select a blog post in the right panel.
            </p>
          )}
          <p className="text-xs text-gray-400 mt-6 max-w-sm">
            This is a placeholder for the editor. The full blog post will be rendered seamlessly into this page on the live site.
          </p>
        </div>
      </div>
    </section>
  );
}
