import { Database } from 'lucide-react';
import DatabaseNewForm from './database-new-form';
import prisma from '@/lib/prisma';

export default async function Databases({ params }: { params: { workspace: string } }) {
	const workspaceSlug = params.workspace;
	const workspace = await prisma.workspace.findUniqueOrThrow({
		where: {
			slug: workspaceSlug,
		},
		include: {
			Database: true,
		},
	});

	if (workspace?.Database.length == 0) {
		return (
			<div className="mt-12">
				<h1 className="text-3xl font-semibold">Databases</h1>
				<div className="bg-white py-6 flex flex-col items-center rounded-lg mt-6 gap-4">
					<Database size={64} className="text-gray-300" />
					<div className="text-center">
						<h3 className="font-semibold">No database</h3>
						<p className="text-gray-700">Get started by creating a new database.</p>
					</div>
					{/* <Button className="flex gap-1 justify-center items-center bg-[#3A7BFE]">
                        <Plus />
                        New Database
                    </Button> */}
					<DatabaseNewForm />
				</div>
			</div>
		);
	}

	return (
		<div className="mt-12">
			<h1 className="text-3xl font-semibold">Databases</h1>
			<div className="bg-white py-6 flex flex-col items-center rounded-lg mt-6 gap-4">
				{workspace.Database.map((database) => (
					<div key={database.id} className="flex flex-row">
						<Database size={64} className="text-gray-300" />
						<div className="text-center">
							<h3 className="font-semibold">{database.name}</h3>
							<p className="text-gray-700">{database.provider}</p>
						</div>
					</div>
				))}
				<DatabaseNewForm />
			</div>
		</div>
	);
}