"use client";

import { MessageSquareWarning } from "lucide-react";
import { MessageForm } from "./_components/messageForm";
import { PaginatedTable } from "_components/PaginatedTable";
import { ColumnDef } from "@tanstack/react-table";
import { Notam } from "@repo/db";

export default function MessagePage() {
	return (
		<>
			<div className="grid grid-cols-6 gap-4">
				<div className="col-span-full">
					<p className="text-2xl font-semibold text-left flex items-center gap-2">
						<MessageSquareWarning className="w-5 h-5" /> Service Nachrichten
					</p>
				</div>
				<div className="card bg-base-200 shadow-xl mb-4 col-span-6">
					<div className="card-body">
						<MessageForm />
					</div>
				</div>
			</div>
			<PaginatedTable
				prismaModel="notam"
				columns={
					[
						{
							accessorKey: "message",
							header: "Nachricht",
						},
						{
							accessorKey: "color",
							header: "Status",
							cell: ({ row }) => {
								const color = row.getValue("color");
								return color;
							},
						},
						{
							accessorKey: "createdAt",
							header: "Erstellt am",
							sortDescFirst: false,
							cell: ({ cell }) => {
								const date = new Date(cell.getValue() as string);
								return date.toLocaleDateString();
							},
						},
					] as ColumnDef<Notam>[]
				}
			/>
		</>
	);
}