import type { Metadata } from "next";
import { buttonVariants } from "@/components/ui/button"
import { PlusIcon } from "lucide-react"
import Link from "next/link"
import { DataTable } from "./_component/DataTable"
import { getBooks } from "@/lib/data"

export const metadata: Metadata = {
  title: "Books | Admin | E-Library",
  description: "Manage the E-Library book catalog for Federal Polytechnic Bali.",
};

export default async function Page() {
    const books = await getBooks();

    const noBooks = books.length;

    return (
        <main className="flex flex-col gap-4 items-start py-4 px-4 md:gap-6 md:py-6 md:px-6">
            <div className="w-full flex items-center justify-between px-4 md:gap-6 md:px-6">
                <h2 className="text-2xl font-semibold">All Books - {noBooks}</h2>
                <Link href={"/admin/books/add"} className={buttonVariants()}>
                    <PlusIcon className="w-4 h-4 mr-2" />
                    Add a Book
                </Link>
            </div>
            <DataTable data={books} />
        </main>
    )
}