import SiteBreadcrumb from "@/components/site-breadcrumb";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import FaqTable from "./components/table";
import { Button } from "@/components/ui/button";
import { Plus } from "lucide-react";
import { StatisticsBlock } from "@/components/blocks/statistics-block";
import ReportTable from "./components/table";

const FaqPage = async () => {
  return (
    <div>
      <SiteBreadcrumb />
      <div className="space-y-4">
        <div className="flex items-center">
          <div className="flex-1 text-xl font-medium text-default-900">
            Pelaporan Akun
          </div>
          <div className="flex-none"></div>
        </div>
        <Card>
          <CardContent className="p-4">
            <div className="grid md:grid-cols-3   gap-4">
              <StatisticsBlock
                total="64"
                title="Total Pelaporan"
                className=" border shadow-none"
              />
              <StatisticsBlock
                title="Total Disetujui"
                total="564"
                className=" border shadow-none"
                chartColor="#FB8F65"
              />
              <StatisticsBlock
                title="Pelaporan Pending"
                total="+5.0%"
                className=" border shadow-none"
                chartColor="#2563eb"
              />
            </div>
          </CardContent>
        </Card>
        <ReportTable />
      </div>
    </div>
  );
};

export default FaqPage;
