/**
 * Staff Dashboard - Blog Management Page
 * List, filter, and manage blog posts
 */

import { Suspense } from "react";
import BlogManagementClient from "@/components/staff/blog/BlogManagementClient";

export const metadata = {
  title: "Blog Management | Staff Dashboard",
  description: "Manage blog posts, create new content, and generate AI images",
};

export default function BlogManagementPage() {
  return (
    <div className="p-6">
      {/* Header */}
      <div className="mb-8">
        <h1 className="text-3xl font-bold text-gray-900">Blog Management</h1>
        <p className="mt-2 text-gray-600">
          Create, edit, and manage blog posts with AI-powered image generation
        </p>
      </div>

      {/* Blog Management Interface */}
      <Suspense fallback={<BlogLoadingSkeleton />}>
        <BlogManagementClient />
      </Suspense>
    </div>
  );
}

function BlogLoadingSkeleton() {
  return (
    <div className="space-y-4">
      <div className="h-12 bg-gray-200 rounded animate-pulse" />
      <div className="h-64 bg-gray-200 rounded animate-pulse" />
    </div>
  );
}
