'use client';

import { Database } from '@prisma/client';
import { ColumnDef } from '@tanstack/react-table';
import Image from 'next/image';
import { databaseProviders } from './database-new-form';
import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger } from '@/components/ui/dropdown-menu';
import { Button } from '@/components/ui/button';
import { EllipsisVertical } from 'lucide-react';

interface IDatabase extends Pick<Database, 'id' | 'name' | 'provider' | 'createdAt'> {}

export const columns: ColumnDef<IDatabase>[] = [
	{
		accessorKey: 'provider',
		header: 'Provider',
		cell(props) {
			return (
				<div className="flex items-center">
					<Image src={databaseProviders.filter((pro) => pro.id.toUpperCase() === props.getValue())[0]?.image?.src} alt={databaseProviders.filter((pro) => pro.id.toUpperCase() === props.getValue())[0]?.image?.alt} width={32} height={32} />
				</div>
			);
		},
	},
	{
		accessorKey: 'name',
		header: 'Name',
	},
	{
		accessorKey: 'createdAt',
		header: 'Created',
		cell(props) {
			return <span>{new Date(props.getValue() as string).toLocaleDateString('en-US', { hour: '2-digit', minute: '2-digit' })}</span>;
		},
	},
];