import { Button } from "@/components/ui/button";
import { hasPermission, Role } from "@/lib/validation/permissions";
import { auth } from "@/server/auth";
import { api } from "@/trpc/server";
import { Edit, Edit2Icon, Edit3, MoreVertical, Trash } from "lucide-react";
import Link from "next/link";
import { notFound } from "next/navigation";
import React from "react";

async function Page({ params }: { params: Promise<{ slug: string }> }) {
  const { slug } = await params;
  const article = await api.article.get({ slug: slug });
  if (!article) return notFound();
  const session = await auth();
  const isEditor = session?.user
    ? hasPermission(session.user.role, Role.EDITOR)
    : false;
  return (
    <div>
      <div className="flex w-full items-center justify-between">
        <h1 className="text-4xl font-bold">{article.title}</h1>
        {isEditor && (
          <div className="space-x-2">
            <Button asChild variant={"outline"}>
              <Link href={`/artikel/${article.slug}/edit`}>
                <Edit className="size-4" />
                <span>Bearbeiten</span>
              </Link>
            </Button>
            <Button size={"icon"} variant={"outline"}>
              <MoreVertical className="size-4" />
            </Button>
          </div>
        )}
      </div>
    </div>
  );
}

export default Page;