"use client";

import { useParams } from "next/navigation";
import { useEffect, useState } from "react";
import ComponentCard from "@/src/components/admin/common/ComponentCard";
import PageProtection from "@/src/components/admin/common/PageProtection";
import AddBlogForm from "../add-blog";

export default function EditBlogPage() {
  const params = useParams();
  const [itemId, setItemId] = useState<number | undefined>(undefined);

  useEffect(() => {
    if (params?.id) {
      setItemId(Number(params.id));
    }
  }, [params?.id]);

  return (
    <div className="space-y-6">
      <PageProtection pageSlug="blog.add-blog">
        <ComponentCard
          title="Blog Management | Edit Blog"
          desc="Create, edit, publish, and manage blogs."
        >
          <AddBlogForm id={itemId} />
        </ComponentCard>
      </PageProtection>
    </div>
  );
}