import { appConfig, appRoutes } from "@/config";
import { Article } from "@/server/db/schema";
import Link from "next/link";
import React from "react";

import {
  Card,
  CardContent,
  CardDescription,
  CardFooter,
  CardHeader,
  CardTitle,
} from "@/components/ui/card";
import Avatar from "../avatar";
import { Icons } from "../icons";
import { Badge } from "../ui/badge";

function ArticleCard({
  title,
  slug,
  author,
  published,
  createdAt,
}: Pick<Article, "title" | "slug" | "createdAt" | "author" | "published">) {
  const authorName = author?.name ?? `${appConfig.name} Team`;

  return (
    <Link href={appRoutes.article(slug)}>
      <Card className="group flex h-full flex-col justify-between">
        <CardHeader>
          <CardTitle>{title}</CardTitle>
        </CardHeader>

        <CardFooter className="flex items-center justify-between">
          <div className="flex items-center space-x-2">
            {author ? (
              <Avatar className="size-6" src={author?.image} fb={authorName} />
            ) : (
              <Icons.logo className="size-6 text-muted-foreground transition-colors duration-150 group-hover:text-foreground" />
            )}
            <span className="text-sm text-muted-foreground">{authorName}</span>
          </div>
          <div className="flex items-center space-x-2">
            {typeof published === "boolean" && (
              <Badge
                className="size-max px-2 py-px text-xs"
                variant={published ? "outline" : "destructive"}
              >
                {published ? "Veröffentlicht" : "Draft"}
              </Badge>
            )}
            <p className="text-sm text-muted-foreground">
              {createdAt.toLocaleDateString("de-DE", {
                dateStyle: "long",
              })}
            </p>
          </div>
        </CardFooter>
      </Card>
    </Link>
  );
}

export default ArticleCard;