import React from "react";
import { api } from "@/trpc/server";
import { Card, CardFooter, CardHeader, CardTitle } from "@/components/ui/card";

const StatCard = ({
  title,
  value,
  children,
}: {
  title: string;
  value: string;
  children?: React.ReactNode;
}) => {
  return (
    <Card className="w-full max-w-64">
      <CardHeader className="">
        <span className="text-4xl font-bold leading-5">{value}</span>
        <CardTitle className="text-2xl">{title}</CardTitle>
      </CardHeader>
      {children && <CardFooter className="pb-2">{children}</CardFooter>}
    </Card>
  );
};

async function GlobalStats() {
  const articleCount = await api.article.getCount();
  const authorCount = await api.author.getCount();
  const categoryCount = await api.category.getCount();
  return (
    <div className="flex w-full gap-4">
      <StatCard title="Artikel" value={String(articleCount)}>
        {/* <Button
          variant={"link"}
          className="ml-auto px-1 py-px text-muted-foreground"
        >
          Alle Artikel
        </Button> */}
      </StatCard>
      <StatCard title="Kategorien" value={String(categoryCount)} />
      <StatCard title="Autoren" value={String(authorCount)} />
    </div>
  );
}

export default GlobalStats;
