Epicnabbo-Catalogus-Updated-Daily/src/app/admin/events/events-table.tsx

"use client";

import { Pencil } from "lucide-react";
import Link from "next/link";
import { useTranslations } from "next-intl";
import { DataTable } from "@/components/admin/data-table";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import type { DataTableColumn, PaginatedResult } from "@/types";

interface EventRow {
	id: number;
	title: string;
	typeName: string;
	typeColor: string;
	startsAt: Date;
	endsAt: Date | null;
	status: string;
	hostUserId: number;
}

const statusVariants: Record<
	string,
	"default" | "secondary" | "outline" | "destructive"
> = {
	published: "default",
	draft: "secondary",
	cancelled: "destructive",
	completed: "outline",
};

interface EventsTableProps {
	data: PaginatedResult<EventRow>;
}

export function EventsTable({ data }: EventsTableProps) {
	const t = useTranslations("pages.admin.events");

	const statusLabel: Record<string, string> = {
		published: t("statusPublished"),
		draft: t("statusDraft"),
		cancelled: t("statusCancelled"),
		completed: t("statusCompleted"),
	};

	const columns: DataTableColumn<EventRow>[] = [
		{ key: "id", label: t("colId"), sortable: true },
		{
			key: "title",
			label: t("colTitle"),
			sortable: true,
			render: (value) => <span className="font-medium">{String(value)}</span>,
		},
		{
			key: "typeName",
			label: t("colType"),
			sortable: false,
			render: (_, row) => (
				<Badge style={{ backgroundColor: row.typeColor, color: "#fff" }}>
					{row.typeName}
				</Badge>
			),
		},
		{
			key: "startsAt",
			label: t("colStarts"),
			sortable: true,
			render: (value) => (
				<span className="text-sm">
					{new Date(value as unknown as string).toLocaleString()}
				</span>
			),
		},
		{
			key: "status",
			label: t("colStatus"),
			sortable: true,
			render: (value) => {
				const key = String(value);
				return (
					<Badge variant={statusVariants[key] ?? "secondary"}>
						{statusLabel[key] ?? key}
					</Badge>
				);
			},
		},
		{
			key: "actions",
			label: t("colActions"),
			render: (_, row) => (
				<Button variant="ghost" size="icon" asChild>
					<Link href={`/admin/events/${row.id}`}>
						<Pencil className="h-4 w-4" />
					</Link>
				</Button>
			),
		},
	];

	return (
		<DataTable
			data={data}
			columns={columns}
			searchPlaceholder={t("searchPlaceholder")}
		/>
	);
}