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";

const FaqPage = async () => {
  return (
    <div>
      <SiteBreadcrumb />
      <div className="space-y-4">
        <Card>
            <CardHeader className="border-b border-solid border-default-200 mb-6">
                <CardTitle>
                    <div className="flex items-center">
                        <div className="flex-1 text-xl font-medium text-default-900">
                        FAQ Data
                        </div>
                        <div className="flex-none">
                        <Button
                            fullWidth
                            size="md"
                        >
                            <Plus className="w-6 h-6 me-1.5"/>
                            New FAQ
                        </Button>
                        </div>
                    </div>
                </CardTitle>
            </CardHeader>
            <CardContent className="p-0">
                <FaqTable />
          </CardContent>
        </Card>
      </div>
    </div>
  );
};

export default FaqPage;