"use client";

import { useEffect, useState } from "react";
import { api } from "@/lib/api";
import type { RawQAItem } from "@/lib/types";
import QAReviewCard from "@/components/QAReviewCard";

export default function ReviewPage() {
  const [items, setItems] = useState<RawQAItem[]>([]);

  async function load() {
    const data = await api.get<RawQAItem[]>("/raw-qa?review_status=pending");
    setItems(data);
  }

  useEffect(() => {
    load();
  }, []);

  return (
    <div className="space-y-6">
      <div>
        <h1 className="text-2xl font-semibold text-ink">待审核问答</h1>
      </div>
      <div className="space-y-4">
        {items.map((item) => (
          <QAReviewCard key={item.id} item={item} onChanged={load} />
        ))}
        {items.length === 0 ? (
          <div className="rounded-md border border-line bg-white p-8 text-center text-sm text-slate-500">暂无待审核问答</div>
        ) : null}
      </div>
    </div>
  );
}