"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 AddFaqForm from "../add-faq";

export default function EditFaqPage() {
  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="faq.add-faq">
        <ComponentCard
          title="FAQ Management | Edit FAQ"
          desc="Create, edit, and manage FAQs."
        >
          <AddFaqForm id={itemId} />
        </ComponentCard>
      </PageProtection>
    </div>
  );
}