Epicnabbo-Catalogus-Updated-Daily/src/app/admin/polls/polls-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 PollRow {
	id: number;
	title: string;
	status: string;
	showResults: number;
	multipleChoice: number;
	startsAt: Date | null;
	endsAt: Date | null;
	createdAt: Date;
}

const statusVariants: Record<string, "default" | "secondary" | "outline"> = {
	active: "default",
	draft: "secondary",
	closed: "outline",
};

interface PollsTableProps {
	data: PaginatedResult<PollRow>;
}

export function PollsTable({ data }: PollsTableProps) {
	const t = useTranslations("pages.admin.polls");

	const statusLabel: Record<string, string> = {
		active: t("statusActive"),
		draft: t("statusDraft"),
		closed: t("statusClosed"),
	};

	const columns: DataTableColumn<PollRow>[] = [
		{ key: "id", label: t("colId"), sortable: true },
		{
			key: "title",
			label: t("colTitle"),
			sortable: true,
			render: (value) => <span className="font-medium">{String(value)}</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: "multipleChoice",
			label: t("colType"),
			render: (value) => (
				<span className="text-sm">
					{Number(value) ? t("typeMultiple") : t("typeSingle")}
				</span>
			),
		},
		{
			key: "createdAt",
			label: t("colCreated"),
			sortable: true,
			render: (value) => (
				<span className="text-sm">
					{new Date(value as unknown as string).toLocaleDateString()}
				</span>
			),
		},
		{
			key: "actions",
			label: t("colActions"),
			render: (_, row) => (
				<Button variant="ghost" size="icon" asChild>
					<Link href={`/admin/polls/${row.id}`}>
						<Pencil className="h-4 w-4" />
					</Link>
				</Button>
			),
		},
	];

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