import { api } from "@/trpc/server";
import { appConfig, appRoutes } from "@/config";
import CategoryGrid from "@/components/category/grid/category-grid";
import ArticleGrid from "@/components/article/grid/article-grid";
import SectionHeader from "@/components/section-header";
import ArrowLink from "@/components/arrow-link";
import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
import { Icons } from "@/components/icons";
import { Button } from "@/components/ui/button";
import Link from "next/link";

export default async function Home() {
  const categories = await api.category.getMany({ limit: 6 });
  const articles = await api.article.getMany({ limit: 6 });
  return (
    <>
      <Alert>
        <div className="flex flex-col gap-2 sm:flex-row">
          <Icons.logo className="size-8" />
          <div>
            <AlertTitle className="font-bold">
              Wilkommen bei Logipedia!
            </AlertTitle>
            <AlertDescription className="text-muted-foreground">
              Lorem ipsum, dolor sit amet consectetur adipisicing elit.
            </AlertDescription>
          </div>
          <Button asChild className="sm:ml-auto">
            <Link href={appRoutes.about}>
              Erfahre mehr über {appConfig.name}
            </Link>
          </Button>
        </div>
      </Alert>

      <SectionHeader text="Kategorien">
        <ArrowLink href={appRoutes.allCategories}>Alle Kategorien</ArrowLink>
      </SectionHeader>
      <CategoryGrid categories={categories} />

      <SectionHeader text="Artikel">
        <ArrowLink href={appRoutes.allArticles}>Alle Artikel</ArrowLink>
      </SectionHeader>
      <ArticleGrid articles={articles} />
    </>
  );
}