"use client";
import { Check, Cross, DatabaseBackupIcon } from "lucide-react";
import { PaginatedTable } from "../../../_components/PaginatedTable";
import Link from "next/link";
import { ColumnDef } from "@tanstack/react-table";
import { Changelog, Keyword, Prisma } from "@repo/db";

export default () => {
	return (
		<>
			<PaginatedTable
				stickyHeaders
				initialOrderBy={[{ id: "createdAt", desc: true }]}
				prismaModel="changelog"
				showSearch
				getFilter={(search) =>
					({
						OR: [
							{ title: { contains: search, mode: "insensitive" } },
							{ text: { contains: search, mode: "insensitive" } },
						],
					}) as Prisma.ChangelogWhereInput
				}
				columns={
					[
						{
							header: "Title",
							accessorKey: "title",
						},
						{
							header: "Auf Changelog Seite anzeigen",
							accessorKey: "showOnChangelogPage",
							cell: ({ row }) => (row.original.showOnChangelogPage ? <Check /> : <Cross />),
						},
						{
							header: "Erstellt am",
							accessorKey: "createdAt",
							cell: ({ row }) => new Date(row.original.createdAt).toLocaleDateString(),
						},
						{
							header: "Aktionen",
							cell: ({ row }) => (
								<div className="flex items-center gap-1">
									<Link href={`/admin/changelog/${row.original.id}`}>
										<button className="btn btn-sm">bearbeiten</button>
									</Link>
								</div>
							),
						},
					] as ColumnDef<Changelog>[]
				}
				leftOfSearch={
					<span className="flex items-center gap-2">
						<DatabaseBackupIcon className="h-5 w-5" /> Changelogs
					</span>
				}
				rightOfSearch={
					<p className="flex items-center justify-between gap-2 text-left text-2xl font-semibold">
						<Link href={"/admin/changelog/new"}>
							<button className="btn btn-sm btn-outline btn-primary">Erstellen</button>
						</Link>
					</p>
				}
			/>
		</>
	);
};